95 lines
3.0 KiB
HTML
95 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-br">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Caminho Circular em Loop</title>
|
|
<style>
|
|
body,
|
|
html {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
background-color: #282c34;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
canvas {
|
|
border: 1px solid #fff;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<canvas id="animationCanvas"></canvas>
|
|
|
|
<script>
|
|
const canvas = document.getElementById('animationCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// Define canvas dimensions
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
|
|
const circle = {
|
|
centerX: canvas.width / 2,
|
|
centerY: canvas.height / 2,
|
|
radius: 150, // Raio do caminho circular
|
|
rotationSpeed: 0.02,
|
|
angle: 0,
|
|
linePath: [], // Para armazenar a trajetória
|
|
maxPathLength: 500 // Limite para o comprimento da trajetória
|
|
};
|
|
|
|
function drawCircularPath() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Adiciona o ponto da trajetória atual ao caminho
|
|
const pathX = circle.centerX + circle.radius * Math.cos(circle.angle);
|
|
const pathY = circle.centerY + circle.radius * Math.sin(circle.angle);
|
|
circle.linePath.push({ x: pathX, y: pathY });
|
|
|
|
// Desenha a trajetória acumulada
|
|
ctx.beginPath();
|
|
for (let i = 0; i < circle.linePath.length - 1; i++) {
|
|
ctx.moveTo(circle.linePath[i].x, circle.linePath[i].y);
|
|
ctx.lineTo(circle.linePath[i + 1].x, circle.linePath[i + 1].y);
|
|
}
|
|
ctx.strokeStyle = '#61dafb';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
|
|
// Limita o comprimento da trajetória e reinicia a trajetória quando necessário
|
|
if (circle.linePath.length > circle.maxPathLength) {
|
|
circle.linePath.shift(); // Remove o primeiro ponto do caminho
|
|
if (circle.angle >= Math.PI * 2) { // Completa um ciclo
|
|
circle.angle = 0; // Reinicia o ângulo
|
|
circle.linePath = []; // Limpa a trajetória
|
|
}
|
|
}
|
|
}
|
|
|
|
function animate() {
|
|
circle.angle += circle.rotationSpeed;
|
|
drawCircularPath();
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
animate();
|
|
|
|
// Ajusta o tamanho do canvas quando a janela é redimensionada
|
|
window.addEventListener('resize', () => {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
circle.centerX = canvas.width / 2;
|
|
circle.centerY = canvas.height / 2;
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |