html5 canvas烟花特效需模拟升空、爆炸、扩散、衰减四阶段，通过firework与particle类实现物理感粒子系统，结合拖尾渲染、hsl渐变、非线性衰减及离屏合成优化视觉真实感。
用 HTML5 Canvas 制作烟花绽放特效，核心是构建一个可控、有物理感的粒子系统，而不是简单画几个圆点。关键在于模拟升空、爆炸、扩散、衰减四个阶段，并让每一帧的变化符合视觉惯性——看起来“飘”而不是“飞”，“亮”而不是“闪”。
1. 搭建基础画布与动画循环
先创建全屏 canvas 并适配窗口变化：
- 用
canvas.width = window.innerWidth和height动态设置尺寸，监听resize事件实时更新 - 动画必须用
requestAnimationFrame驱动，保证 60fps 流畅；禁用setInterval，它无法同步屏幕刷新 - 每帧开头用半透明黑色（如
rgba(0, 0, 0, 0.05)）覆盖全画布，实现自然拖尾效果，而不是清空再重绘
2. 设计两个核心类：Firework 和 Particle
结构清晰才能复用和调试：
- Firework（升空弹）：含起始坐标、目标高度、上升速度、加速度（略大于1，模拟推力）、到达后触发爆炸
-
Particle（爆炸粒子）：每个粒子带独立状态——
x/y、vx/vy、生命周期life（归一化为 0→1）、尺寸、透明度、HSL 色值 - 爆炸时生成 200–300 个粒子，初速度按角度随机发散，叠加小范围高斯扰动，避免对称呆板
3. 让粒子“有重量、会呼吸”
流体感来自非线性变化和微小扰动：
- 加速度设为微小向下值（如
ay = 0.03），让轨迹呈柔和抛物线 - 每帧用阻力系数衰减速度（如
vx *= 0.97; vy *= 0.97），粒子越飞越慢、越飘越散 - 颜色用 HSL 动态插值：中心粒子
H=0, S=100%, L=85%（炽热红），外层逐步偏移色相、降低饱和与亮度 - 尺寸与透明度按
life非线性变化：前 20% 缓慢放大变亮，中间 50% 快速衰减，末段 30% 迅速透明消失
4. 渲染优化：低成本模拟光晕与残影
Canvas 不支持高斯模糊，但可用叠加技巧逼近真实感：
- 粒子不直接画在主 canvas，而是先绘制到离屏 canvas（offscreen canvas），再以低透明度（
globalAlpha = 0.12）反复合成到主画布，保留运动残影 - 每帧额外绘制一圈更大、更淡（
alpha ≈ 0.02）、同色相的粒子，形成发光边缘 - 禁用抗锯齿：
ctx.imageSmoothingEnabled = false，避免粒子缩放出现毛边；统一用fillRect或arc + fill，不用stroke
不复杂但容易忽略：所有计算尽量基于归一化 lifetime（0→1），少用固定帧数判断；多用小数、少用整数；颜色和运动越连续，效果越柔软自然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
