Canvas制作烟花特效

Canvas可以实现很多有趣的特效，包括烟花特效。下面是一个简单的Canvas烟花特效制作步骤：

1. 创建Canvas画布和一个数组，用来存储烟花粒子。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const particles = [];

2. 定义一个Particle类，用来创建烟花粒子。注意每个粒子都有一个随机的颜色。

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = Math.random() * 5 - 2.5;
    this.vy = Math.random() * 5 - 2.5;
    this.color = `rgb(${Math.round(Math.random() * 255)}, ${Math.round(Math.random() * 255)}, ${Math.round(Math.random() * 255)})`;
    this.radius = 3;
    this.life = 100;
  }
  
  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.vx;
    this.y += this.vy;
    this.vx *= 0.97;
    this.vy *= 0.97;
    this.radius -= 0.05;
    this.life--;
  }
}

3. 创建一个函数，用来在点击Canvas时创建一个烟花。

function createFirework(x, y) {
  for (let i = 0; i < 50; i++) {
    particles.push(new Particle(x, y));
  }
}

4. 在Canvas上监听鼠标点击事件，并在点击时创建一个烟花。

canvas.addEventListener('click', (e) => {
  createFirework(e.clientX, e.clientY);
});

5. 创建一个动画循环函数，用来更新和绘制所有的烟花粒子。

function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  for (let i = 0; i < particles.length; i++) {
    particles[i].draw();
    particles[i].update();
    
    if (particles[i].life <= 0) {
      particles.splice(i, 1);
      i--;
    }
  }
  
  requestAnimationFrame(loop);
}

6. 最后启动动画循环函数。

loop();

现在你就可以在Canvas上看到一个简单的烟花特效了。你可以根据需要调整粒子的数量、速度、颜色和寿命等参数，以创建更多的烟花效果。