Canvas粒子爆炸效果的核心是将每个粒子视为微型物理对象，具备位置、速度、加速度和寿命，并通过极坐标生成初速度、克制加速度、生命周期驱动透明度/尺寸/颜色变化、分层设计（主爆/拖尾/闪光）及高效渲染循环实现真实感。
Canvas 粒子爆炸效果的核心，是把每个粒子当作一个微型物理对象来处理——它有位置、速度、加速度和寿命，不是简单地“动起来”，而是按真实感逻辑演化。渲染循环只是呈现结果的环节，真正决定效果质感的是背后的物理计算是否合理、轻量、可控。
粒子运动的物理建模
每个粒子需携带基础物理量：x/y 位置、vx/vy 速度、ax/ay 加速度（如重力、阻力）、life 生命周期。关键不在堆参数，而在让它们协同工作：
- 初速度用极坐标生成：先随机角度 θ（Math.random() * Math.PI * 2），再乘以幅度（建议 4–8），得到 vx = cos(θ) × mag，vy = sin(θ) × mag
- 加速度要克制：重力 ay 可设为 0.03–0.07，阻力用衰减因子更高效——每帧执行 vx *= 0.985; vy *= 0.985，比显式计算阻力公式更稳定
- 避免“飞出画布”：粒子 y 坐标超过 canvas.height + 100 或 life ≤ 0 时，应立即从活动数组中移除，不参与后续更新
生命周期驱动视觉变化
粒子不是匀速变淡，而是随时间自然衰减。所有视觉属性应绑定 life 值，形成统一节奏：
- 透明度：ctx.globalAlpha = life / maxLife（maxLife 通常设为 80–120，对应约 1.3–2 秒）
- 尺寸：size = baseSize × (life / maxLife)，让粒子越老越小，模拟消散感
- 颜色渐变：可预设起始色（如 #FFD700）与终止色（如 #444），用插值公式 lerp(r1,r2,life/maxLife) 动态计算 RGB 分量
渲染循环的正确写法
用 requestAnimationFrame 是底线，但光靠它不够。真正影响流畅度的是“只更新该更新的”：
- 不用 for (let i = 0; i 0 的粒子引用
- 每帧开头调用 ctx.clearRect(0, 0, canvas.width, canvas.height) 清空画布，别依赖 fillStyle=‘transparent’覆盖
- 禁用抗锯齿：ctx.imageSmoothingEnabled = false，对圆形粒子绘制提速明显
- 避免在 draw 中做计算：位置更新、衰减判断、剔除逻辑全放在 update 阶段，draw 阶段只做纯绘图操作
多层爆炸增强真实感
单层粒子容易显得单薄。一次“爆炸”建议拆解为三组协同粒子：
- 主爆粒子（60–100个）：高初速、中等寿命、暖色调，负责主体扩散
- 拖尾粒子（20–30个）：初速低 30%、阻力更小（如 *= 0.995）、延迟 5–10 帧释放，模拟余烬飘落
- 闪光粒子（3–8个）：极大初速（12+）、极短寿命（≤20帧）、alpha 固定为 0.8–1.0，突出爆发瞬间
