101 lines
3.1 KiB
HTML
101 lines
3.1 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>Animação de Linha Trajetória Circular</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
|
|
lineLength: 100, // Comprimento da linha
|
|
rotationSpeed: 0.02,
|
|
angle: 0,
|
|
linePath: [] // Para armazenar a trajetória
|
|
};
|
|
|
|
function drawRotatingLine() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
ctx.save();
|
|
ctx.translate(circle.centerX, circle.centerY);
|
|
|
|
// Cálculo da posição da linha
|
|
const lineStartX = circle.radius * Math.cos(circle.angle);
|
|
const lineStartY = circle.radius * Math.sin(circle.angle);
|
|
const lineEndX = (circle.radius + circle.lineLength) * Math.cos(circle.angle);
|
|
const lineEndY = (circle.radius + circle.lineLength) * Math.sin(circle.angle);
|
|
|
|
// Adiciona o ponto final da linha ao caminho
|
|
circle.linePath.push({ x: lineEndX, y: lineEndY });
|
|
|
|
// Desenha a linha
|
|
ctx.beginPath();
|
|
ctx.moveTo(lineStartX, lineStartY);
|
|
ctx.lineTo(lineEndX, lineEndY);
|
|
ctx.strokeStyle = '#61dafb';
|
|
ctx.lineWidth = 5;
|
|
ctx.stroke();
|
|
|
|
// 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 = 'rgba(255, 255, 255, 0.5)';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
|
|
ctx.restore();
|
|
}
|
|
|
|
function animate() {
|
|
circle.angle += circle.rotationSpeed;
|
|
drawRotatingLine();
|
|
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> |