HTML5星空动画制作与Canvas循环技巧

const stars = [];
const starCount = 100;
for (let i = 0; i < starCount; i++) {
stars.push({
x: Math.random()  width,
y: Math.random()  height,
radius: Math.random() * 1.5 + 0.5,
opacity: Math.random()
});
}

function drawStars() {
  ctx.clearRect(0, 0, width, height);
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, width, height);
stars.forEach(star => {
ctx.beginPath();
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
ctx.fillStyle = rgba(255, 255, 255, ${star.opacity});
ctx.fill();
});
}

function animate() {
  // 更新星星透明度模拟闪烁
  stars.forEach(star => {
    star.opacity += Math.random() * 0.05 - 0.025;
    if (star.opacity > 1) star.opacity = 1;
    if (star.opacity < 0) star.opacity = 0;
  });
drawStars();
requestAnimationFrame(animate);
}
// 启动动画
animate();