星空旋转的奥秘：从codepen解读canvas动画

最近课业比较轻松，我在codepen上花费了不少时间，借此机会学习一些杰出的作品。昨天，我偶然发现了一个令人惊叹的星空动画，迫不及待地想与大家分享它的精彩之处。

codepen代码：简洁而优雅

这个动画的源码出乎意料的简洁，仅有一百多行代码。其逻辑也非常清晰易懂。主要思路是让不同轨道的星星绕着中心点旋转。此外，半径越大的星星在视觉上离我们越近，因为透视效果会产生一种错觉，仿佛星星正从远处向我们飞来。

// 设置画布元素和画布上下文
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 设置中心点
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

// 设置星星数量和轨道半径
const numStars = 100;
const maxRadius = 200;

// 创建星星数组
const stars = [];
for (let i = 0; i < numStars; i++) {
  stars.push({
    x: Math.random() * maxRadius,
    y: Math.random() * maxRadius,
    radius: Math.random() * 2,
    speed: Math.random() * 0.1,
    angle: Math.random() * 2 * Math.PI,
  });
}

// 渲染函数
function render() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 旋转画布
  ctx.translate(centerX, centerY);
  ctx.rotate(Math.PI / 180);

  // 绘制星星
  for (let i = 0; i < numStars; i++) {
    const star = stars[i];
    ctx.beginPath();
    ctx.arc(star.x, star.y, star.radius, 0, 2 * Math.PI);
    ctx.fillStyle = "white";
    ctx.fill();

    // 更新星星的位置和角度
    star.x += Math.cos(star.angle) * star.speed;
    star.y += Math.sin(star.angle) * star.speed;
    star.angle += 0.01;
  }

  // 请求下一次动画帧
  requestAnimationFrame(render);
}

// 启动动画
render();

旋转动画：透视的错觉

这个动画的关键在于让星星绕中心点旋转。通过使用translate()和rotate()方法，我们将画布的原点移动到中心点，并围绕原点旋转画布。这会产生一种错觉，仿佛星星正绕着我们旋转。

星星的距离和大小：创造视觉层次

为了让动画更具吸引力，我们通过调整星星的半径来控制它们在视觉上的距离。半径越大的星星似乎离我们越近。我们还赋予每个星星一个随机的速度，让它们以不同的速度旋转，从而创造出一种动态的视觉效果。

优化：避免闪烁

为了确保动画流畅，我们需要避免闪烁。闪烁通常是由浏览器在渲染画布时跳帧引起的。为了解决这个问题，我们可以使用requestAnimationFrame()函数，它可以根据浏览器渲染速度动态请求下一个动画帧，从而确保动画平滑运行。

展望：无限的可能性

这个星空动画只是一个例子，展示了canvas动画的强大功能。利用canvas，我们可以创建各种交互式和引人入胜的动画。通过探索不同的形状、运动和效果，我们可以打造出令人惊叹的视觉体验。