94 lines
2.9 KiB
HTML
94 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-br">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link id="conexao" rel="stylesheet" href="../Css/page/Telas_acao/load.css">
|
|
<style id="fundouser">
|
|
</style>
|
|
<title>Ambiente de teste</title>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
|
|
<!-- Seu conteúdo principal aqui -->
|
|
<main id="entrada_1">
|
|
<canvas id="animationCanvas"></canvas>
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
<script src="./padrao.js"></script>
|
|
|
|
<!--padrao_A1 reponsavel ter toda a estrutura que aplicara o data na tela-->
|
|
<!-- -->
|
|
|
|
|
|
</html> |