实现流体感前端烟花特效需模拟物理运动（重力、阻力）、粒子生命周期、HSL颜色渐变及多层残影渲染；Canvas 2D即可胜任，无需WebGL。
要实现具备流体感的前端烟花爆炸特效，核心不是单纯画圆点或粒子，而是模拟物理运动（加速度、阻力、重力）+ 粒子生命周期 + 颜色渐变 + 多次采样渲染。Canvas 2D API 完全胜任，无需 WebGL。
粒子系统：构建有质量感的爆炸单元
每个烟花爆炸由数百个粒子组成，每个粒子需携带独立状态：
- 位置（x, y）和速度（vx, vy），初始速度按角度随机发散，带轻微高斯扰动，避免机械对称
-
加速度设为微小向下值（如
ay = 0.05），模拟重力拖拽，让轨迹略呈抛物线而非直线 -
阻力系数（如
drag = 0.97）逐帧衰减速度，使粒子“飘”而非“飞”，这是流体感关键 - 透明度与尺寸随生命周期（lifetime）非线性变化：前 30% 时间缓慢放大+变亮，中段快速衰减，末段迅速透明化消失
颜色策略：用 HSL 动态渐变替代固定色值
真实烟花有光晕扩散和色温过渡。推荐用 HSL 模式控制：
- 爆炸中心粒子：H=0（红）→ S=100% → L=80%，高亮炽热
- 外层粒子：H 缓慢偏移至 30（橙）或 240（蓝），S 降至 60–70%，L 降到 40–50%，模拟冷却与散射
- 每帧根据剩余 lifetime 插值 HSL 值，再转为 rgba 绘制，比预设色表更自然
渲染优化：复合合成与多次模糊模拟光晕
Canvas 本身不支持高斯模糊，但可用“多层半透明叠加”低成本模拟：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 将粒子画在离屏 canvas（
offscreenCtx）上，清空时用globalAlpha = 0.15而非完全清空，保留残影 - 主 canvas 每帧绘制 offscreen canvas 一次，再叠加一层极淡（alpha≈0.03）、稍大一圈的同色粒子，制造发光边缘
- 禁用
ctx.imageSmoothingEnabled = false，避免缩放锯齿；粒子用fillRect或arc+fill，不用 stroke
触发与节奏：让爆炸“呼吸”而非瞬间爆发
真实烟花有引信延迟、初爆、二次迸裂等过程。可在单次点击/事件中分阶段启动：
- 第 0 帧：发射一枚“升空弹”，匀速上升，到顶点后触发爆炸
- 第 1 帧：生成主粒子群（200–300 粒），赋予放射状初速
- 第 15–25 帧：从主粒子中随机选 10–20 个，再次分裂出二级小粒子（速度更乱、寿命更短、色相偏冷）
- 全程用
requestAnimationFrame驱动，粒子对象自带update()和draw()方法，生命周期结束后自动从数组剔除
不复杂但容易忽略：流体感本质来自“不精确”——速度微扰、衰减非线性、颜色连续插值、残影叠加。少用整数、多用小数运算，禁用硬编码时间值，全部基于 lifetime 归一化（0→1）计算，效果会立刻柔软起来。
