掌握Canvas，绘制璀璨星河中的陨星坠落动画

2024-01-23 16:54:33

使用Canvas打造美轮美奂的星星下落动画

引子

在当今Web开发领域，Canvas作为一种功能强大的绘图工具，以其卓越的交互性和可定制性备受推崇。本文将重点介绍如何利用Canvas绘制美轮美奂的星星下落动画，赋予你的网页令人惊叹的视觉效果。

初始化Canvas

首先，我们需要创建一个Canvas元素，并获取其上下文对象，用于绘制和操作图形。代码如下：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

绘制星星

接下来，我们定义一个绘制星星的函数，该函数接收参数x和y，分别表示星星的横纵坐标。

function drawStar(x, y) {
  ctx.beginPath();
  ctx.moveTo(x, y);
  for (let i = 0; i < 5; i++) {
    let offset = 20 * Math.sin(i * Math.PI / 5);
    ctx.lineTo(x + offset, y + offset);
  }
  ctx.closePath();
  ctx.fillStyle = "white";
  ctx.fill();
}

创建星星数组

为了创建一组下落的星星，我们使用Array.from函数生成一个数组，其中包含一定数量的星星对象，每个对象具有x和y坐标，以及speed属性，表示星星下落的速度。

const stars = Array.from({ length: 100 }, () => ({
  x: Math.random() * canvas.width,
  y: Math.random() * canvas.height,
  speed: Math.random() * 3 + 1,
}));

动画循环

最后，我们进入动画循环，不断更新星星的位置并绘制它们。该循环使用requestAnimationFrame函数实现，它会在浏览器下次重绘之前调用指定的回调函数。

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (const star of stars) {
    star.y += star.speed;
    if (star.y > canvas.height) {
      star.y = 0;
    }
    drawStar(star.x, star.y);
  }

  requestAnimationFrame(animate);
}

animate();