教我用js写个烟花代码

下面是一个简单的烟花效果代码，使用 JavaScript 和 HTML5 canvas 实现：

<canvas id="fireworks"></canvas>

<script>
  var canvas = document.getElementById("fireworks");
  var ctx = canvas.getContext("2d");
  var particles = [];

  function Particle() {
    this.x = canvas.width / 2;
    this.y = canvas.height / 2;
    this.vx = Math.random() * 10 - 5;
    this.vy = Math.random() * 10 - 5;
    this.color = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
    this.size = Math.random() * 5;
  }

  function loop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < particles.length; i++) {
      var p = particles[i];
      p.x += p.vx;
      p.y += p.vy;
      ctx.beginPath();
      ctx.fillStyle = p.color;
      ctx.arc(p.x, p.y, p.size, 0, 2 * Math.PI);
      ctx.fill();
    }

    requestAnimationFrame(loop);
  }

  canvas.addEventListener("click", function() {
    for (var i = 0; i < 100; i++) {
      particles.push(new Particle());
    }
  });

  loop();
</script>

该代码在页面点击时会生成随机颜色和大小的100个粒子，这些粒子会在屏幕上随机移动，模拟烟花效果。

需要注意的是, 代码中使用了 requestAnimationFrame 函数，该函数用于在浏览器下一次重绘时运行代码，用于提高动画的性能。