html中使用canvas实现流星雨特效

实现步骤：

1. Canvas 设置和样式：

   • 使用 <canvas> 元素创建一个全屏的画布，用于绘制流星。

2. Meteor 类：

   • 定义了一个 Meteor 类来表示流星，每个流星有起始位置 (x, y)、长度 (length)、速度 (speed) 和颜色 (color)。

3. 随机生成流星：

   • initMeteors(numMeteors) 函数用于初始化指定数量的流星，每颗流星的位置、长度、速度和颜色都是随机生成的。

4. 动画循环：

   • animateMeteors() 函数是主要的动画循环，每帧更新每颗流星的位置并重新绘制。如果流星移出屏幕，则重新设置其起始位置，实现流星穿越的效果。

5. 响应式处理：

   • 在窗口大小改变时，重新设置 Canvas 的大小，并重新生成流星，确保它们适应新的尺寸。

效果图：