<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Title</title>
</head>
<body>
<canvas id='root'></canvas>
<script src='./app.js'></script>
</body>
</html>
xxxxxxxxxx
const canvas = document.getElementById("root");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.globalCompositeOperation = "destination-over";
let count = 0;
let counter = 0;
let scale = 10;
let isAnimating = true;
const colors = ["black"]; // Массив цветов
let colorIndex = 0;
let size = 5;
function draw() {
let angle = count * 0.3;
let radius = scale * Math.sqrt(count);
let positionX = radius * Math.sin(angle/2) + canvas.width / 2;
let positionY = radius * Math.cos(angle/2) + canvas.height / 2;
ctx.fillStyle = "tomato";
ctx.strokeStyle = colors[colorIndex];
ctx.beginPath();
ctx.arc(positionX, positionY, size, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
ctx.stroke();
count++;
}
function animate() {
if (!isAnimating) return;
draw();
size += 1;
if (size == 300) { // Если счетчик достиг заданного значения
count = 0; // Сбрасываем счетчик для цикличности
colorIndex = (colorIndex + 1) % colors.length; // Переключаем цвет
isAnimating = false;
}
window.requestAnimationFrame(animate);
}
animate();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.