写一段烟花动画的js代码

非常好! 这是一段简单的烟花动画的 JavaScript 代码:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 用于存储烟花的数组
var fireworks = [];

// 烟花的构造函数
function Firework(x, y) {
  this.x = x;
  this.y = y;
  this.r = Math.random() * 2 + 1;  // 烟花的半径
  this.vx = Math.random() * 5 - 2.5;  // 烟花的水平速度
  this.vy = Math.random() * 5 - 2.5;  // 烟花的竖直速度
  this.hue = Math.random() * 360;  // 烟花的色调
  this.lifespan = Math.random() * 300 + 100;  // 烟花的寿命
  this.alpha = 1;  // 烟花的透明度
}

// 绘制烟花
Firework.prototype.draw = function() {
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
  ctx.fillStyle = "hsla(" + this.hue + ", 100%, 50%, " + this.alpha + ")";
  ctx.fill();
}

// 更新烟花
Firework.prototype.update = function() {
  this.x += this.vx;
  this.y += this.vy;
  this.alpha -= 0.01;
}

// 渲染函数
function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  // 清空画布

  // 遍历所有烟花
  for (var i = 0; i < fireworks.length; i++) {
    fireworks[i].draw();
    fireworks[i].update();

    // 如果烟花的寿命已经用完，就从数组中移除它
    if (fireworks[i].alpha < 0) {
      fireworks.splice(i, 1);
      i--;
    }
  }

  requestAnimationFrame(render);  // 请求浏览器调用渲染函数
}

// 添加新烟花
function addFirework() {
  // 随机生成烟花的坐标
  var x = Math.random() * canvas.width;
  var y = Math.random()