js动画烟花效果视频

// 初始化画布
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = Math.random() * 6 - 3;
    this.vy = Math.random() * 6 - 3;
    this.gravity = 0.05;
    this.life = 1;
  }

  update() {
    this.vy += this.gravity;
    this.x += this.vx;
    this.y += this.vy;
    this.life -= 0.01;
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(255, 100, 100, ${this.life})`;
    ctx.fill();
  }
}

const particles = [];

function createFirework() {
  const x = canvas.width / 2;
  const y = canvas.height;
  for (let i = 0; i < 100; i++) {
    particles.push(new Particle(x, y));
  }
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach((particle, index) => {
    particle.update();
    particle.draw();
    if (particle.life <= 0) {
      particles.splice(index, 1);
    }
  });
  requestAnimationFrame(animate);
}

createFirework();
animate();