如梦似幻的Canvas烟花：用鼠标点亮夜空

前端

2023-12-27 07:27:13

用原生JS绘制面向对象的Canvas烟花：照亮你的数字天空

在这个信息时代，计算机屏幕已成为我们探索创意和技术奇观的新疆域。而画布元素（Canvas），作为一个灵活的虚拟画布，让我们得以挥洒创意，打造栩栩如生的动画和交互式图形。

画布：烟花表演的舞台

HTML5中的Canvas元素是一个可编程的画布，允许我们直接操作像素，创造出令人惊叹的视觉效果。它就像一个空白的画板，等待着我们的创意填充。

面向对象的烟花设计

在面向对象的编程中，烟花不再是简单的特效，而是由属性和方法组成的动态对象。通过创建自定义类，我们可以赋予烟花生命，让它们在画布上自由舞动。

想象一个名为“Particle”的类，它定义了烟花粒子的核心特性，包括位置、速度和加速度。通过实例化多个粒子并赋予它们不同的属性，我们可以创造出千变万化的烟花效果。

点燃创意之鼠

鼠标在这个数字烟花秀中扮演着至关重要的角色。它充当一个起点，从那里粒子发射而出，留下闪亮的轨迹。通过事件监听，我们可以检测鼠标点击并将其位置存储为粒子的起始点。

绘制技术的升华

烟花的美丽不仅仅在于其物理行为，更在于其迷人的视觉呈现。为了捕捉烟花的动态光彩，我们需要掌握Canvas的绘画技巧。通过使用渐变、阴影和粒子之间的连线，我们可以创造出逼真的爆炸效果。

核心代码片段

以下是面向对象Canvas烟花效果的核心代码片段：

class Particle {
  constructor(x, y, dx, dy, color, radius) {
    // 粒子的基本属性
    this.x = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.color = color;
    this.radius = radius;
  }

  draw() {
    // 绘制粒子
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
  }

  update() {
    // 更新粒子的位置和速度
    this.x += this.dx;
    this.y += this.dy;
  }
}

function animate() {
  // 不断更新画布并绘制粒子
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (let particle of particles) {
    particle.draw();
    particle.update();
  }

  requestAnimationFrame(animate);
}

canvas.addEventListener("click", (e) => {
  // 监听鼠标点击并创建新的粒子
  let mouseX = e.clientX;
  let mouseY = e.clientY;

  particles.push(new Particle(mouseX, mouseY, 0, 0, "#FF0000", 5));
});

animate();