83 lines
3.8 KiB
JavaScript
83 lines
3.8 KiB
JavaScript
// Adiciona um ouvinte de evento para quando o conteúdo do DOM estiver completamente carregado
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
// Obtém o elemento com o ID 'entrada_1'
|
|
var main = document.getElementById("entrada_1");
|
|
|
|
// Verifica se a tag main está vazia
|
|
if (main.innerHTML.trim() === "") {
|
|
// Se a tag estiver vazia, obtém novamente o mesmo elemento
|
|
const tela_laod = document.getElementById('entrada_1');
|
|
|
|
// Adiciona um elemento canvas ao conteúdo da tag main
|
|
tela_laod.innerHTML = '<canvas id="animationCanvas"></canvas>';
|
|
|
|
// Obtém o contexto 2D do canvas para desenhar
|
|
const canvas = document.getElementById('animationCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// Define as dimensões do canvas para preencher a tela
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
|
|
// Define um objeto 'circle' que armazena as propriedades da animação
|
|
const circle = {
|
|
centerX: canvas.width / 2, // Centro do círculo no eixo X
|
|
centerY: canvas.height / 2, // Centro do círculo no eixo Y
|
|
radius: 150, // Raio do círculo
|
|
rotationSpeed: 0.02, // Velocidade de rotação
|
|
angle: 0, // Ângulo atual
|
|
linePath: [], // Armazena a trajetória do ponto
|
|
maxPathLength: 350 // Comprimento máximo da trajetória
|
|
};
|
|
|
|
// Função para desenhar a trajetória circular
|
|
function drawCircularPath() {
|
|
// Limpa o canvas antes de desenhar
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Calcula as coordenadas do ponto atual na trajetória circular
|
|
const pathX = circle.centerX + circle.radius * Math.cos(circle.angle);
|
|
const pathY = circle.centerY + circle.radius * Math.sin(circle.angle);
|
|
// Adiciona o ponto atual à trajetória
|
|
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 = '#22c0a3'; // Define a cor da linha
|
|
ctx.lineWidth = 10; // Define a largura da linha
|
|
ctx.stroke(); // Desenha a linha no canvas
|
|
|
|
// Limita o comprimento da trajetória
|
|
if (circle.linePath.length > circle.maxPathLength) {
|
|
circle.linePath.shift(); // Remove o primeiro ponto do caminho
|
|
// Reinicia a trajetória se um ciclo completo foi completado
|
|
if (circle.angle >= Math.PI * 2) { // Verifica se completou um ciclo
|
|
circle.angle = 0; // Reinicia o ângulo
|
|
circle.linePath = []; // Limpa a trajetória
|
|
}
|
|
}
|
|
}
|
|
|
|
// Função de animação que atualiza a posição do ponto e desenha a trajetória
|
|
function animate() {
|
|
circle.angle += circle.rotationSpeed; // Atualiza o ângulo
|
|
drawCircularPath(); // Desenha a trajetória atual
|
|
requestAnimationFrame(animate); // Solicita a próxima animação
|
|
}
|
|
|
|
animate(); // Inicia a animação
|
|
|
|
// Ajusta o tamanho do canvas quando a janela é redimensionada
|
|
window.addEventListener('resize', () => {
|
|
canvas.width = window.innerWidth; // Ajusta a largura
|
|
canvas.height = window.innerHeight; // Ajusta a altura
|
|
circle.centerX = canvas.width / 2; // Atualiza o centro X
|
|
circle.centerY = canvas.height / 2; // Atualiza o centro Y
|
|
});
|
|
}
|
|
});
|