如何绘制炫酷的 Canvas 烟花动画

2024-02-15 04:00:54

简介

当面试官问你是否会使用 Canvas 时，你是否信心满满地回答“当然”？如果是这样，那么恭喜你，你已经踏上了掌握现代 Web 开发必备技能的旅程。

Canvas 是一种强大的 HTML5 元素，允许你使用 JavaScript 代码绘制和操作复杂的图形。它的用途广泛，从创建交互式动画到绘制数据可视化图表。在本文中，我们将专注于使用 Canvas 绘制炫酷的烟花动画。

为 Canvas 做准备

在开始绘制烟花之前，我们首先需要创建一个 Canvas 元素并获取它的上下文。

<canvas id="canvas" width="500" height="500"></canvas>

<script>
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
</script>

绘制烟花

烟花是由许多粒子组成的，这些粒子从一个中心点向外爆炸。要绘制烟花，我们将使用贝塞尔曲线来创建粒子轨迹。

// 创建一个粒子类
class Particle {
  constructor(x, y, speed, angle, color) {
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.angle = angle;
    this.color = color;
  }

  // 更新粒子位置
  update() {
    this.x += this.speed * Math.cos(this.angle);
    this.y += this.speed * Math.sin(this.angle);
  }

  // 绘制粒子
  draw() {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, 2, 2);
  }
}

添加动画

为了使烟花动起来，我们需要添加动画循环。

function animate() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 更新并绘制粒子
  for (let i = 0; i < particles.length; i++) {
    particles[i].update();
    particles[i].draw();
  }

  // 请求下一个动画帧
  requestAnimationFrame(animate);
}

触发烟花

现在，我们已经有了烟花和动画循环，让我们添加一个触发机制。当用户单击画布时，它将发射一束烟花。

canvas.addEventListener("click", (e) => {
  // 获取鼠标点击位置
  const x = e.clientX;
  const y = e.clientY;

  // 创建烟花粒子
  for (let i = 0; i < 100; i++) {
    const speed = Math.random() * 10;
    const angle = Math.random() * 2 * Math.PI;
    const color = `hsl(${Math.random() * 360}, 100%, 50%)`;

    const particle = new Particle(x, y, speed, angle, color);
    particles.push(particle);
  }
});