原生js烟花特效

原生 JavaScript 烟花特效是一种利用 JavaScript 和 Canvas 绘制出的模拟烟花绽放效果的动画。

基础概念：

利用 Canvas 的绘图 API 来绘制烟花的粒子。
通过定时器或 requestAnimationFrame 实现动画效果。
计算粒子的运动轨迹、速度、颜色等属性。

优势：

不依赖任何第三方库，轻量且兼容性好。
可以根据需求高度定制烟花的效果。

类型：

简单的粒子绽放效果。
带有拖尾效果的烟花。
多种颜色和形状组合的复杂烟花。

应用场景：

网站的节日庆祝页面。
活动推广的特效展示。
个人作品展示中的创意元素。

可能出现的问题及原因：

烟花效果卡顿：可能是粒子数量过多，计算量过大，或者是浏览器性能不足。
颜色显示异常：可能是颜色值设置错误。
烟花不绽放：可能是动画逻辑中的关键参数设置不正确，比如粒子的初速度、加速度等。

解决方法：

优化粒子数量，根据设备性能动态调整。
仔细检查颜色值的格式和范围。
逐步调试动画逻辑中的参数，通过打印日志等方式找出错误所在。

以下是一个简单的原生 JavaScript 烟花特效示例代码：

<canvas id="fireworkCanvas" width="800" height="600"></canvas>

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

class Particle {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.vx = Math.random() * 4 - 2;
    this.vy = Math.random() * -4 - 1;
    this.gravity = 0.05;
    this.alpha = 1;
  }

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

  draw() {
    ctx.save();
    ctx.globalAlpha = this.alpha;
    ctx.beginPath();
    ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.restore();
  }
}

function createFirework() {
  const x = canvas.width / 2;
  const y = canvas.height;
  const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
  const particles = [];
  for (let i = 0; i < 100; i++) {
    particles.push(new Particle(x, y, color));
  }
  return particles;
}

let fireworks = [];

function animate() {
  requestAnimationFrame(animate);
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  fireworks.forEach((firework, index) => {
    firework.forEach(particle => {
      particle.update();
      particle.draw();
    });
    if (firework.every(p => p.alpha <= 0)) {
      fireworks.splice(index, 1);
    }
  });

  if (Math.random() < 0.05) {
    fireworks.push(createFirework());
  }
}

animate();
</script>