用canvas绘制一个星空烟花场景

好的，以下是一个用Canvas绘制星空烟花的示例代码：

HTML代码：

<canvas id="myCanvas"></canvas>

JavaScript代码：

// 获取canvas和绘图上下文
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 设置画布宽度和高度
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 定义星星对象
function Star(x, y, radius, speed) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.speed = speed;
}

// 定义火花对象
function Spark(x, y, color, radius, speed, direction) {
  this.x = x;
  this.y = y;
  this.color = color;
  this.radius = radius;
  this.speed = speed;
  this.direction = direction;
}

// 定义一个数组来存储火花
var sparks = [];

// 创建星星
var stars = [];
for (var i = 0; i < 200; i++) {
  var x = Math.random() * canvas.width; // 随机x坐标
  var y = Math.random() * canvas.height; // 随机y坐标
  var radius = Math.random() * 3; // 随机半径
  var speed = Math.random() * 2; // 随机速度
  stars.push(new Star(x, y, radius, speed)); // 添加到星星数组
}

// 动画循环
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布

  // 绘制星星
  ctx.fillStyle = '#ffffff';
  for (var i = 0; i < stars.length; i++) {
    var star = stars[i];
    ctx.beginPath();
    ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
    ctx.fill();
    star.x -= star.speed; // 移动星星
    if (star.x < 0) {
      star.x = canvas.width; // 重置x坐标
    }
  }

  // 绘制火花
  for (var i = 0; i < sparks.length; i++) {
    var spark = sparks[i];
    ctx.fillStyle = spark.color;
    ctx.beginPath();
    ctx.arc(spark.x, spark.y, spark.radius, 0, Math.PI * 2);
    ctx.fill();
    spark.x += Math.cos(spark.direction) * spark.speed; // 计算x方向速度
    spark.y += Math.sin(spark.direction) * spark.speed; // 计算y方向速度
    spark.radius -= 0.05; // 缩小半径
  }

  // 移除已经消失的火花
  for (var i = sparks.length - 1; i >= 0; i--) {
    if (sparks[i].radius < 0) {
      sparks.splice(i, 1);
    }
  }

  requestAnimationFrame(animate); // 动画循环
}

// 鼠标点击事件，添加火花
canvas.addEventListener('click', function(e) {
  var x = e.clientX;
  var y = e.clientY;
  var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#00ffff', '#ff00ff']; // 颜色数组
  for (var i = 0; i < 30; i++) {
    var color = colors[Math.floor(Math.random() * colors.length)];
    var radius = Math.random() * 4 + 1; // 随机半径
    var speed = Math.random() * 5 + 1; // 随机速度
    var direction = Math.random() * Math.PI * 2; // 随机方向
    sparks.push(new Spark(x, y, color, radius, speed, direction)); // 添加到火花数组
  }
});

animate(); // 开始动画循环

这段代码将创建200个星星，并且在鼠标点击事件触发时添加30个随机颜色的火花。火花会随机移动，并在逐渐缩小半径后消失。同时，星星也会随机移动，创建出星空的效果。您可以根据需要进行修改和调整。