Canvas仿真烟花特效：物理建模、渲染与性能优化实战

简介仿真烟花主题的前端特效源码包适合网页开发者、动画爱好者用于学习参考或直接嵌入页面实现逼真绚丽的烟花绽放效果。包内仅4个文件包含1个可直接运行的HTML入口文件与3张辅助背景图片城市夜景、月亮等整体压缩包仅321KB轻量易用。这套特效基于粒子系统构建融合重力、空气阻力等物理参数通过调整发射速度、粒子生命周期与颜色渐变可完整展现烟花升空、高空爆炸与逐渐消散的过程同时加入用户交互触发点击指定位置即可发射新的烟花适合节日页面、个人网站或活动展示场景。已有814人学习下载阅读源码可理解前端粒子动画从初始化、更新到渲染的完整实现思路还可按需修改粒子数量、颜色、音效及图片素材是快速上手炫酷视觉特效的实用参考。1. 仿真烟花不是画个圆圈一个 Canvas 特效背后的物理与渲染问题第一次看到“仿真烟花”这四个字多半会以为这是一个循环粒子加随机颜色的 Demo。真去复现才发现烟花效果不是画一个圆再散开而是一个由炮弹上升、炸点引爆、粒子飞散、拖尾衰减四段拼起来的完整物理过程。头部那一下炸开的形态、尾部拖出来的光晕、粒子落地前的闪烁全是物理参数和渲染策略共同作用的结果。把这个标题拆开看“精品源码”意味着代码能二次开发而不只是跑通“炫酷特效”意味着视觉直接决定观感“仿真”则要求粒子运动符合直觉而不是一顿乱飞。这篇笔记就围绕这三个关键词展开覆盖物理建模、Canvas 渲染、发射器封装、性能优化与踩坑排查适合想用纯前端做出高质量烟花效果、或者准备把它做成课设/比赛作品的开发者。2. 把烟花拆成物理模型爆炸速度、重力与空气阻力的三个关键方程2.1 一粒火星的轨迹速度衰减、重力与阻力的合成烟花粒子在空中的运动本质是带阻尼的抛体运动。每一帧更新位置时做两件事先按速度位移再按加速度修改速度。加速度由重力和阻力两部分构成重力固定向下阻力与速度成正比。阻力方向始终与速度方向相反所以阻力加速度写作-velocity * drag。用一个极简的更新函数来表达function updateParticle(p, dt) { // 重力固定向下p.gravity 是重力加速度建议取值 0.05 ~ 0.15 p.vy p.gravity * dt; // 阻力方向相反大小与速度成正比drag 越大粒子减速越快 p.vx - p.vx * p.drag * dt; p.vy - p.vy * p.drag * dt; // 按速度更新位置 p.x p.vx * dt; p.y p.vy * dt; // 速度衰减到接近 0 时直接静止避免无限微移消耗性能 if (Math.abs(p.vx) 0.01 Math.abs(p.vy) 0.01) { p.vx 0; p.vy 0; } }重力加速度、阻力系数和 dt 的取值直接决定烟花形态。重力取 0.08、阻力取 0.02 时粒子能飞得远且轨迹舒展适合模拟升空后炸开的大菊花型烟花重力取 0.15、阻力取 0.01 时粒子更像被“甩”出去的散开快、落得猛适合模拟急促的爆炸感。dt 是时间步长建议固定为 1 而不是依赖帧间隔否则同样参数在不同帧率下会出现巨大差异。2.2 从炮弹出膛到炸点上升阶段的运动模型烟花不是“生成粒子就直接在空中出现”而是先有一个上升的炮弹飞到指定高度后爆炸。炮弹的运动同样是抛体模型但有两点特殊一是上升期间没有粒子拖尾只是一个小光点二是爆炸发生在炮弹速度最小的瞬间附近。更真实的做法是给炮弹一个向上的初速度并让重力把它拉停。function updateShell(s, dt) { // 炮弹上升速度用负值表示向上重力把它慢慢拉停 s.vy 0.05 * dt; s.y s.vy * dt; s.x s.vx * dt; // 速度由负变正的临界点就是顶点此时触发爆炸 if (s.vy 0 !s.exploded) { explode(s); s.exploded true; } }炸点高度由初速度决定初速度 11、重力 0.05 时顶点大约在正常屏幕高度的 55% 到 65% 处。调整爆炸高度的习惯做法不是硬编码 y 坐标而是修改炮弹的初速度和重力让物理过程自己算出顶点。把爆炸精确对准顶点烟花炸开后形态才对称如果在上升途中或下落途中爆炸粒子会带着额外速度散开方向明显偏向一边。2.3 粒子不是永动机生命周期与透明度衰减的配合粒子从爆炸瞬间开始计时生命值随时间递减同时透明度、大小和颜色同步变化。最简单的线性衰减已经够用但真实烟花往往在生命中期最亮快熄灭时迅速暗淡。推荐用两段式衰减前半段透明度缓降后半段快速归零。p.life - dt * p.lifeSpeed; // 归一化剩余生命0 表示刚爆炸1 表示即将熄灭 const t 1 - p.life / p.maxLife; let alpha; if (t 0.6) { alpha 1 - t * 0.8; // 前 60% 生命保持较高亮度 } else { alpha 1.6 - t * 1.6; // 后 40% 快速变暗直至消失 } p.alpha Math.max(0, alpha);两段式衰减的代价是曲线接点处可能出现亮度跳变所以代码里用线性插值平滑过渡。lifeSpeed 控制粒子总存活时长建议按烟花种类区分牡丹型取 60~80垂柳型取 120~180后者拖尾长需要更长的生命才能完整呈现下落感。粒子生命结束时要注意从数组中移除或者打上 dead 标记延迟回收避免在渲染循环里频繁 splice 导致性能抖动。3. 用 Canvas 把粒子渲染成烟花发光、拖尾与颜色渐变的实现3.1 最简渲染循环requestAnimationFrame 与粒子池渲染循环负责三件事清屏、更新物理、绘制粒子。清屏方式直接决定拖尾效果这里先说标准做法坑在下一章单独展开。每帧调用ctx.clearRect把上一帧画面抹掉再逐粒子绘制这是最安全也最基础的方案。function frame() { // 清空整块画布注意不是 clearRect(0, 0, w, h) 就完事 // 需要配合 devicePixelRatio 换算后的尺寸否则会残留半透明残影 ctx.clearRect(0, 0, canvas.width, canvas.height); // 更新所有粒子并剔除死亡粒子 particles particles.filter((p) p.life 0); for (const p of particles) { updateParticle(p, 1); drawParticle(p); } // 每帧生成 1~2 个上升炮弹控制总粒子量在性能预算内 if (particles.length 1200) { spawnShell(); } requestAnimationFrame(frame); }粒子池是精品源码和 Demo 的分水岭。直接filter splice在粒子数低于 500 时没感觉超过 2000 后垃圾回收会让 Canvas 特效明显卡顿。常见做法是预分配一个固定长度的数组用 pos 指针循环写入把死亡粒子标记为 inactive 而不是物理删除。源码包做到这个程度别人拿去改参数时才不会一改就崩。3.2 拖尾效果的两种实现残影与半透明清屏以及各自适用场景拖尾是烟花效果视觉感最强的部分。第一种做法是半透明清屏不清空画布而是盖一层半透明黑ctx.fillStyle rgba(0, 0, 0, 0.15); ctx.fillRect(0, 0, canvas.width, canvas.height);这样做旧帧痕迹不会立刻消失每一帧都残留 15% 的余光粒子拖出来的尾迹就是由这些残影叠加而成的。缺点也很明显画布上累积的颜色会逐渐变灰想要纯黑背景没问题但想要深蓝、渐变等自定义背景残影会把背景越盖越脏而且粒子重叠处会慢慢发白。第二种做法是每帧完整清屏粒子自身绘制多段历史位置通过数组存最近 5~8 帧的坐标逐段画不同透明度的星星。这种拖尾颜色更干净适合彩色烟花代价是每个粒子要多存坐标数组内存翻倍。我的建议是背景是黑色就选半透明清屏视觉冲击力强背景要图片或渐变就用坐标历史方案。3.3 颜色引擎HSV 色相循环与爆炸色板烟花颜色的核心是“色相渐变”。直接用hsl(h, s, l)构建颜色把 h 映射到粒子角度和生命阶段就能产生从内圈金色到外圈粉橙的过渡。Hue 循环的一个常见实现是把画布的 2D 全局合成和 HSL 字符串组合起来但 HSL 字符串拼接在粒子数多时性能较差Canvas 的ctx.createLinearGradient也不适合单粒子绘制。常见做法是每帧预生成一个颜色查找表// 预生成 360 个 HSL 颜色字符串避免每帧频繁拼接 const colorTable Array.from({ length: 360 }, (_, hue) hsl(${hue}, 100%, 60%) ); function particleColor(p) { // 色相随粒子速度和角度变化速度快的偏冷速度慢的偏暖 const hue (Math.atan2(p.vy, p.vx) * 180 / Math.PI 180 p.life * 30) % 360; return colorTable[Math.floor(hue)]; }拖尾同色但透明度依次降低视觉上比给拖尾换色更耐看。色相偏移系数 30 表示粒子每存活一帧色相前进 30 度数值越大颜色变化越“妖艳”数值小则偏素雅。爆炸色板方面更推荐预设几组色板比如“金红”“蓝紫”“青绿”发射时随机选一组而不是全部用随机色相这样同屏多个烟花不会糊成彩色噪点。4. 从零写一个可复用的烟花发射器代码结构与参数封装4.1 发射器对象设计发射、爆炸、更新的状态机精品源码和一次性的页面 Demo 差别在于能否被复用。把发射逻辑抽成一个类对外只暴露launch(x, baseY)和update(dt)两个方法内部用状态机维护炮弹的生命周期class FireworkLauncher { constructor(canvas, options {}) { this.canvas canvas; this.ctx canvas.getContext(2d); // 合并默认参数options 优先这是源码包该有的姿态 this.opts { gravity: 0.08, drag: 0.02, shellSpeed: 11, particleCount: 80, particleMaxLife: 90, hueRange: [0, 360], ...options }; this.shells []; this.particles []; } launch(x, baseY) { const angle (Math.random() - 0.5) * 0.4; // 小幅随机倾斜 this.shells.push({ x, y: baseY, vx: Math.sin(angle) * 6, vy: -this.opts.shellSpeed, exploded: false }); } update(dt) { for (const s of this.shells) this.updateShell(s, dt); for (const p of this.particles) this.updateParticle(p, dt); } }状态机的核心是炮弹的 exploded 标志爆炸后炮弹性子不会再更新而是生成一组粒子放入粒子列表。这里不建议每帧遍历整个数组做逻辑判断因为 2000 个粒子的状态判断累积下来可感知。一个相对科学的做法是分开维护 shell 和 particle 两个数组各自只遍历自己的数据不需要用对象里的类型字段做分支。4.2 关键参数表一屏漂亮烟花的推荐取值参数才是仿真烟花的灵魂。下表是依据多个开源实现的常见取值整理出的基准值按这个起步基本不会翻车。参数推荐范围视觉效果说明调参方向gravity0.05 ~ 0.12太小粒子飘太久太大炸开直接坠落想要垂柳下落感调小想要短促爆裂调大drag0.005 ~ 0.03阻力影响飞行距离越大越“黏稠”拖尾需要长尾选 0.005~0.01shellSpeed9 ~ 13炸点高度由初速决定想要高空绽放调 12particleCount60 ~ 120单发粒子和整体密度低端设备压到 60高端可到 150particleMaxLife60 ~ 180粒子持续帧数垂柳型 150牡丹型 80 左右hueRange30 ~ 60 度区间同组烟花的色相跨度跨度大色彩丰富跨度小更聚焦调参建议每次只改一个变量。先把炸点高度调对再调拖尾长度最后调色彩。盲改两组以上参数导致问题无法归因这是特效调参最容易被忽略的工程习惯。4.3 性能预算粒子数量上限与数组复用仿真烟花最怕“一屏几十发同时爆”视频截图效果拉满但运行时一帧要更新几千粒子。按照主流中端手机 Canvas 2D 的性能基准纯 2D 粒子控制在 1500 到 2000 个是比较稳妥的预算线。超了就先减粒子数而不是去优化绘制。绘制部分最大的性能瓶颈不是 fillRect 而是全局合成切换和 clip 区域变更频繁切换globalCompositeOperation的代价非常高。const MAX_PARTICLES 1800; // 超出预算时拒绝生成新炮弹而不是强行生成导致帧率崩溃 if (this.particles.length this.shells.length MAX_PARTICLES) { return; }空循环复用也是源码包常见做法。预生成一个最大容量的数组用 cursor 指向当前写入位置粒子死亡后的位置留给新粒子覆盖写而不是push和splice反复修改数组长度。配合之前的粒子池设计长跑 30 分钟后堆内存基本保持不变。性能预算里还要算上 canvas 的实际像素量一个 1920x1080 的 Canvas 承受 1000 个粒子和一个 800x600 的 Canvas 承受 2000 个粒子的总负载差距很大。把 canvas 的 CSS 尺寸和实际 buffer 尺寸分开设置是源码包里最常见的优化切入点。5. Canvas 烟花特效性能翻车与常见问题排查排查建议5.1 在低端手机上掉帧粒子数量与 canvas 尺寸的平衡现象桌面 Chrome 跑得很流畅的烟花放到 Android 中端机上掉帧严重滑动页面时明显卡顿。原因有两层一是 canvas 的实际像素尺寸按设备像素比放大了同样逻辑尺寸下碎片化的像素填充量翻了两三倍二是粒子数用的是桌面机的预算值低端机的 GPU 和 CPU 都要处理同一份负载。解决思路分两个方向把 canvas 实际 buffer 尺寸限制到逻辑尺寸的一半并用 CSS 拉伸代价是边缘发虚但烟花场景本来就是夜晚光斑损失几乎不可见同时把粒子上限从 1800 降到 900。真机调试时要打开性能监控面板观察每一帧的绘制耗时那种把粒子减到 600 以下还卡的设备问题基本不在粒子而在 canvas 尺寸和混合模式上。5.2 粒子粘成一片或闪瞎眼混合模式与透明度叠加的坑现象粒子密集区变成一整块白色光斑没有粒子的颗粒感整个画面发灰、过曝。原因是多个粒子在同一位置叠加透明度半透明圆叠加多次后透明度饱和视觉上变成实心白块。Canvas 默认的source-over混合模式会把每个粒子的颜色按透明度一层层叠上去粒子重叠密度高到一定程度必然过曝。解决方法是使用lighter混合模式做加法混合粒子颜色相加而不是覆盖色彩会更亮但不会发灰发白。代价是背景必须是黑色或深色浅色背景下加成会直接变白。另一个解决思路是每个粒子绘制时降低 alpha让单粒子亮度更低给叠加留余地但调低后单独看粒子会显得很淡所以lighter模式才是这个场景的科学解。5.3 颜色发灰不发亮canvas 背景透明与色域的问题现象烟花颜色饱和度很高但显示在页面上显得灰蒙蒙暗部细节消失。这个坑最常见于 canvas 背景是透明的而页面背景不是纯黑半透明粒子叠加后会透出下层页面的浅色颜色自然发灰。解决方法是给 canvas 画一段纯色底色或者直接用 CSS 给 canvas 元素本身加背景色。另外一个原因是浏览器色域处理色彩较深的红紫在宽色域屏幕上显示正常在普通 sRGB 屏幕上会显得暗红。处理方式不是去改粒子颜色而是把ctx.fillStyle从 HSL 改为hsl(h, 90%, 65%)并提高亮度通道把明度从 50% 提到 65%~70%多数灰蒙蒙的问题都能直接缓解。5.4 明明没报错却不显示坐标系与 DPI 缩放现象逻辑代码完全没报错控制台干净但 canvas 上什么都没有。这类问题的典型原因有两个。一是 canvas 的 width/height 和 CSS 尺寸不一致粒子坐标按 CSS 像素算绘制缓冲区却是物理像素粒子被绘制在可见区域之外。二是没有处理 devicePixelRatio高分屏下 canvas 实际缓冲区比 CSS 尺寸大绘制内容在缓冲区里但被浏览器缩放显示看起来像特效被“压缩”到看不见。排查方法是在绘制回调里先打印canvas.width和canvas.height再打印一个粒子的坐标目测是否在画布范围之内。如果坐标没问题但画面空白检查是否在某个早期 return 分支把缓存了粒子数组常见于页面切换后实例未销毁导致绘制循环被吞掉。5.5 生命周期结束粒子不消失透明度归零但对象残留现象烟花爆完后粒子应该完全消失但屏幕上还留着淡淡的一团并且特效运行越久画面越脏。原因是粒子死亡判定用了透明度小于等于 0而透明度是浮点数经过多次衰减可能永远不等于 0或者粒子已被标记 dead 但还在被绘制循环处理。排查方法是在更新循环里直接打日志观察粒子的 alpha 值序列。解决方法是把死亡判定条件从alpha 0改为life 0life 是整数递减不会出现浮点残留问题同时在绘制的入口处跳过 dead 标记的粒子而不是只跳过更新逻辑但不跳过绘制逻辑。这个坑在粒子池实现里尤其隐蔽因为对象复用时 old 粒子的生命值可能被误当作新粒子的生命值使用。6. 让特效更出圈的进阶技巧用贝塞尔轨迹与二次爆裂设计差异化基础烟花看多了容易审美疲劳拉开差距通常会从轨迹和爆炸结构下手。先说轨迹普通烟花是直线上升垂柳和花冠等高级形态会在下落阶段飘出曲线感。实现时不用真的改变物理模型只需要在粒子飞散后叠加一个随生命变化的横向偏移。偏移用三阶贝塞尔曲线的值来驱动初速度段沿直线快速飞出末段偏移量大产生飘忽感。这个技巧最大的优势是不动物理方程只改渲染层粒子数量不变性能预算不变。二次爆裂是另一种性价比很高的差异化设计让一部分粒子的生命结束后再分裂出子粒子。父粒子飞散到一定距离后按自身位置生成 3~5 个更小的粒子赋予随机速度比父粒子的初速度低方向更散。效果上像是烟花炸完后又炸了一轮高级感比单次爆炸强很多。实现时注意子粒子不继承父粒子的 alpha 而是重新从 1 开始否则分裂出来的小粒子会非常暗淡。分裂触发条件建议放在更新循环的末尾用父粒子的剩余生命值判断而不是时间随机数保证分裂时机稳定可控。参数上可以再加一个“风力层”全局加一个微弱的方向加速度同一屏的烟花会整体地朝一边飘这样视觉上不会全屏对称观感更像真实场面的烟花汇演而不是机械复制。风力建议只影响粒子不影响炮弹否则升空轨迹被吹歪炸点对不上炮弹路径。验证参数是否合理的习惯是打开一屏烟花后截图逐帧看重点看三处爆炸瞬间的扩散是否均匀、拖尾末尾是否有明显的断裂感、粒子落地瞬间的消失是否突兀。大多数参数翻车都能在这三处截图里找出来。我自己的习惯是每次改完参数跑 3 分钟观察整体粒子总量是否稳定、有没有内存持续上涨调参调多了你会发现仿真烟花最难的不是让它炸开而是让它一直炸下去不崩也不腻。希望这篇笔记对你有用少踩点我踩过的坑。本文还有配套的精品资源点击获取