写段javascript代码，实现烟花效果

### 回答1：
以下是一个简单的 JavaScript 代码，用于实现烟花效果：

// 获取画布元素
const canvas = document.getElementById("canvas");

// 获取画布上下文
const ctx = canvas.getContext("2d");

// 设置画布尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 创建一个数组来存储烟花对象
const fireworks = [];

// 创建一个循环，每秒更新60次
setInterval(function() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 遍历烟花数组
  for (let i = 0; i < fireworks.length; i++) {
    // 更新烟花
    fireworks[i].update();

    // 绘制烟花
    fireworks[i].draw();

    // 如果烟花已经消失，则从数组中移除它
    if (fireworks[i].done) {
      fireworks.splice(i, 1);
    }
  }
}, 1000 / 60);

// 创建一个烟花构造函数
function Firework() {
  // 烟花起点坐标
  this.x = Math.random() * canvas.width;
  this.y = canvas.height;

  // 烟花终点坐标
  this.targetX = Math.random() * canvas.width;
  this.targetY = Math.random() * canvas.height;

  // 烟花颜色
  this.color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;

  // 烟花半径
  this.radius = 4;

  // 烟花速度
  this.speed = 8;

  // 烟花加速度
  this.acceleration = 1.05;

  // 烟花已经消失的标志
  this.done = false;

  // 更新烟花位置
  this.update = function() {
    // 计算距离目标点的距离
    const distanceX = this.targetX - this.x;
    const distanceY = this.targetY - this.y;
    const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);

    // 如果烟花已经到达目标点，则设置烟花已经消失的标志为 true
    if (distance < 10) {
      this.done = true;
    }

    // 计算烟花的速度和加速度
    const speedX = distanceX / distance * this.speed;
    const speedY = distanceY / distance * this.speed;
    this.speed *= this.acceleration;

    // 更新烟花的位置
    this.x += speedX;
    this.y += speedY;
  };

  // 绘制烟花
  this.draw = function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
  };
}

// 在每次点击鼠标时创建一个新的烟花对象
canvas.addEventListener("click", function(event) {
  fireworks.push(new Firework());
});

这段代码会在页面上

### 回答2：
烟花效果是一种动态的效果，可以通过使用JavaScript来实现。以下是一个简单的实现例子：

// 获取画布元素
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 烟花数组
const fireworks = [];

// 烟花类
class Firework {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = canvas.height;
    this.targetX = Math.random() * canvas.width;
    this.targetY = Math.random() * canvas.height / 2;
    this.speed = 2;
    this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
  }

  // 更新烟花位置
  update() {
    this.x += (this.targetX - this.x) / 20;
    this.y += (this.targetY - this.y) / 20;

    // 绘制烟花
    ctx.beginPath();
    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
    ctx.fill();
  }
}

// 创建新的烟花
function createFirework() {
  fireworks.push(new Firework());
}

// 动画循环
function loop() {
  // 清空画布
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 更新并绘制烟花
  for (let i = fireworks.length - 1; i >= 0; i--) {
    fireworks[i].update();

    // 移除离开画布的烟花
    if (fireworks[i].y <= fireworks[i].targetY) {
      fireworks.splice(i, 1);
    }
  }

  // 创建新的烟花
  if (Math.random() < 0.05) {
    createFirework();
  }

  // 循环调用
  requestAnimationFrame(loop);
}

// 启动动画
loop();

你可以将上述代码放入一个HTML文件中，并在页面中添加一个具有'id="canvas"'的canvas元素即可看到烟花效果。注意，这只是一个简单的实现例子，你可以根据需求对代码进行修改和扩展。