Canvas动态烟花效果的关键在于粒子物理衰减与逐帧渲染的真实感：初速度3–8、重力0.03–0.06、阻力乘法衰减；生命值驱动透明度、尺寸、HSLA颜色同步退场；主爆、拖尾、闪光三层粒子协同；需及时清理死亡粒子并用离屏Canvas优化性能。
Canvas 绘制动态烟花效果，关键不在“画得多”，而在“动得真”——粒子的物理衰减规律和逐帧渲染逻辑共同决定了视觉真实感。核心是让每个粒子既遵循可预测的运动规则，又保有随机性带来的自然感。
粒子运动：重力、阻力与初速度的平衡
烟花爆炸瞬间，粒子不是匀速飞散，而是受三股力影响：向外的初速度、向下的重力、持续的空气阻力。这三者需协调设置，否则容易出现“飘在天上不落”或“一炸就砸地”的失真：
- 初速度建议控制在 3–8 像素/帧之间；角度用
Math.random() * Math.PI * 2随机生成，确保全向扩散 - 重力加速度设为 0.03–0.06（如
vy += 0.04），太小则下坠迟缓，太大则像石子砸地 - 阻力用乘法衰减：
vx *= 0.97; vy *= 0.97，比减法更符合空气阻力特性，也更易控制衰减速率
视觉衰减：透明度、尺寸与颜色同步退场
粒子存活期间，不能只动不动变——它的“老去”必须被看见。生命值（life）是驱动所有渐变的统一标尺：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 初始
life = 80–120（对应约1–1.5秒），每帧life-- - 透明度：
ctx.globalAlpha = life / maxLife，从满不透明到完全消失 - 尺寸：
radius = baseRadius * (life / maxLife)，越老越小，避免“拖着大尾巴落地” - 颜色推荐用 HSLA 动态插值：例如从
hsla(50, 100%, 70%, 1)（亮黄）渐变到hsla(15, 80%, 30%, 0)（暗橙），靠 hue/saturation/lightness 三通道线性插值实现
多层粒子：主爆、拖尾与闪光协同出场
单层粒子再准也不够“炸”。一次真实感强的爆炸，通常由三层粒子错时配合：
- 主爆炸粒子（60–100个）：高初速、中等寿命、暖色系，构成主体光晕
-
拖尾粒子（15–30个）：初速略低、阻力系数更小（如
*= 0.99）、延迟5–10帧生成，模拟余烬缓慢飘落 - 闪光粒子（3–8个）：极大初速（12+）、极短寿命（20帧内）、alpha 初始为 0.9–1.0，仅在爆炸首帧强闪，强化瞬时冲击力
性能关键：及时清理与离屏缓冲
粒子数量随时间指数增长，不控制就会卡顿。两个硬性动作不能省：
- 每帧遍历粒子数组，life ≤ 0 的立即 splice 删除，避免无效计算拖慢主线程
- 高频绘制时启用 离屏 Canvas 缓冲：先在 offscreen canvas 中绘制粒子群，再一次性 drawImage 到主画布，减少状态切换开销
- 若支持现代浏览器，可用 粒子对象池复用已销毁粒子实例，避免频繁 new/delete 触发 GC
