Canvas绘制流星雨需用倾斜渐变矩形模拟光迹，通过半透明底色叠加实现残影，配合ease-out衰减、随机轨迹与对象池优化性能。
用 HTML5 Canvas 制作带残影拖尾的流星动画，核心不是画“一条线”，而是模拟真实流星的物理视觉特征：一个明亮前段 + 透明渐变的光迹残影 + 快速位移 + 自然淡出。CSS 伪元素适合简单单颗流星，但要做多颗、随机轨迹、可控拖尾长度和性能稳定的流星雨，Canvas 是更可靠的选择。
用 Canvas 绘制带拖尾的流星主体
每颗流星本质是一个“倾斜的渐变矩形”，而非直线或圆点。关键步骤：
- 创建流星对象，包含属性：x, y（起点）、vx, vy（速度向量）、length（光迹长度，建议 20–60px）、alpha（初始透明度，0.8–1.0）、life（生命周期，控制淡出）
- 绘制时不用
ctx.lineTo()，而用ctx.fillRect()或ctx.beginPath() + ctx.fillRect()画一个窄长矩形，并用ctx.save() / ctx.restore()配合ctx.rotate()实现方向倾斜 - 为矩形填充线性渐变色：从亮白（#fff）到完全透明（rgba(255,255,255,0)），方向沿运动轴向，模拟光强衰减
实现自然拖尾（残影）效果
拖尾不是叠加多个流星，而是利用“半透明画布叠加”原理：
- 不调用
ctx.clearRect()全清画布，改用ctx.fillStyle = 'rgba(10, 10, 25, 0.1)'; ctx.fillRect(0, 0, width, height);—— 每帧盖一层极淡黑底，旧光迹自动缓慢衰减，形成连贯残影 - 若需更强拖尾，可额外维护一个“历史点数组”，每帧把流星当前坐标 push 进去，再反向绘制一系列缩放+透明度递减的小矩形（越老越小越透明）
- 注意控制数组长度（如最多存 8–12 个点），避免内存累积
控制运动与消失逻辑
真实流星不是匀速直线，而是短距高速 + 减速消失：
- 位移距离宜短：单帧移动 3–8 像素（视屏幕尺寸缩放），总轨迹控制在屏幕宽度 1/3 内，避免穿屏过久失真
- 加减速用 easing：对 alpha 和 length 做 ease-out 变化，例如
alpha *= 0.97; length *= 0.96;，比 CSS 的ease-out更易精准控制 - 当
alpha 或 <code>length 时，回收该流星对象，重置用于下一次生成
性能与真实感增强技巧
让效果既流畅又耐看，几个实用细节：
- 流星起始位置随机分布在顶部 20% 区域，x 坐标偏移±15%，避免整齐下落；终点不限于底部，允许斜向飞出画布边缘
- 加入轻微随机旋转（±3°）和亮度抖动（rgb 值 ±10），破除机械感
- 用
requestAnimationFrame驱动，禁用setInterval；监听window.resize动态重设 canvas 尺寸 - 流星数量建议控制在 15–30 颗活跃状态，过多影响帧率，可用对象池复用减少 GC 压力
