canvas做一个烟花

Canvas是一个HTML5标签，用于在网页上绘制图形和动画。为了制作一个简单的烟花效果，你可以利用canvas API进行动态绘画。下面是一个简化的步骤：

1. **初始化Canvas**：
创建一个`<canvas>`元素，并获取它的绘图上下文(`2d` context)：

   <canvas id="fireworks" width="400" height="400"></canvas>
   <script>
     const canvas = document.getElementById('fireworks');
     const ctx = canvas.getContext('2d');
   </script>

2. **随机位置和方向**：
设置烟花的位置和初始角度：

   let x = canvas.width / 2;
   let y = canvas.height - 20;
   let angle = Math.random() * Math.PI * 2;

3. **创建烟花轨迹**：
定义一个函数，每帧更新并绘制一个粒子：

   function drawParticle(size, speed, life) {
     ctx.beginPath();
     ctx.arc(x, y, size, angle, angle + Math.PI * 2);
     ctx.fillStyle = 'white';
     ctx.fill();
     ctx.closePath();

     if (life > 0) {
       // 渐变颜色，模拟烟花绽放过程
       ctx.strokeStyle = `hsl(${Math.random() * 360}, 100%, ${life}%>`;
       ctx.lineWidth = size / 2;
       ctx.stroke();
       
       // 更新位置
       x += speed * Math.cos(angle);
       y -= speed * Math.sin(angle);

       life--;
     } else {
       // 烟花消失，清除路径
       ctx.clearRect(x - size, y - size, size * 2, size * 2);
     }
   }

4. **定时器循环**：
使用`requestAnimationFrame`创建一个动画循环，不断绘制新的烟花粒子：

   function animate(timestamp) {
     requestAnimationFrame(animate);
     // 新增一个粒子
     drawParticle(5, 5, 80);
     
     // 控制烟花数量和结束条件
     if (Math.random() > 0.9) { // 每隔一段时间新增一次
       setTimeout(() => {
         animate(timestamp);
       }, 1000);
     }
   }

   animate();

5. **完整的代码示例**：

   ... (之前HTML和JavaScript部分)

   // 其他部分