简介这是一款基于粒子系统与物理模拟的仿真烟花特效源码包面向Web前端开发、游戏特效设计及图形学学习者用于快速搭建可交互的炫酷烟花动画。资源共4个文件包括1个核心HTML页面与3张PNG素材其中HTML承载粒子发射、重力计算、颜色渐变与音效联动等完整逻辑PNG则提供城市背景、月球贴图及使用说明等辅助元素压缩包仅321KB轻量易部署。目前已有814人学习下载适合在网页展示、活动页面或教学演示中直接嵌入使用。通过研读代码可掌握粒子系统生命周期管理、随机运动轨迹模拟、纹理映射与性能优化思路并了解如何结合用户点击触发烟花位置与数量控制是一份兼顾观赏性与教学价值的极简前端特效案例。1. 仿真烟花一份单文件HTML里藏着粒子系统的完整实现烟花特效这类视觉很多人的第一反应是找视频素材或者上重型引擎但真正的“逼真”其实不需要那么重的方案——基于粒子系统的纯前端实现几百行JavaScript加上一张夜景底图就能在浏览器里跑出完整的烟花秀。这份“仿真烟花”资源正是这么个东西index.html承载全部特效逻辑city.png与moon.png把夜空铺好解压后双击就能看到升空、爆炸、散落、消散的完整过程。它特别适合两类人一类是要给活动页、年会背景、电子贺卡找炫酷视觉的前端开发者另一类是刚接触粒子系统、不想一上来啃WebGL的爱好者。读懂这套canvas实现之后礼花、星空、烟雾这些特效你都能顺手改出来。2. 先看懂原理粒子生命周期、物理模型与颜色演变2.1 粒子系统的三个核心生命周期阶段粒子系统本质上就是大量微小几何对象各带一套状态参数在每一帧里更新状态然后绘制出来。烟花特效的粒子会经历三个阶段升空、爆炸、消散。升空阶段你看到的其实是一个“炮弹”粒子在往上飞它带着初速度、颜色和上升方向到达指定高度后这个炮弹粒子“死亡”同时瞬间生成大量火花粒子这就是爆炸火花粒子继承发射点的位置各自朝不同方向飞出去在重力和空气阻力作用下逐渐减速、变色、变小最后透明度归零被回收。拆这份源码的时候我一般会先在代码里找到粒子对象的定义把所有属性列出来对应到这三个阶段上。常见做法是这样定义粒子对象class Particle { constructor(x, y, vx, vy) { this.x x; // 当前x坐标单位像素 this.y y; // 当前y坐标单位像素 this.vx vx; // x轴速度正右负左 this.vy vy; // y轴速度正下负上 this.gravity 0.08; // 单帧重力加速度 this.drag 0.98; // 空气阻力系数每帧乘一次 this.color [255, 255, 255];// 当前RGB颜色数组 this.alpha 1.0; // 透明度1为完全不透明 this.life 120; // 剩余帧数每帧减1 this.active true; // 是否存活false时回收复用 } }逻辑说明以上每个字段都是粒子系统运行时的最小必需项。active字段是性能优化的关键当粒子生命周期结束、透明度归零时并不是直接从一个数组中删掉它——删除数组元素在JavaScript里代价较高常见做法是把它标记为false让后续的粒子池直接覆盖复用。life字段用来控制粒子存活时间它决定了一场烟花从爆开到消散能持续多久值越大烟花尾巴越长、飘散轨迹越完整。参数说明在解压后的index.html里你大概率能看到一个config对象或几行常量定义。重力gravity是“升空”阶段最重要的参数后面会专门讲drag是每帧乘在速度上的系数取值范围通常在0.95到0.99之间0.95时粒子会很快“刹住”停在空中飘0.99时粒子会在屏幕上拉出很长的弧线更像深夜烟花在风里散开的状态。2.2 重力与空气阻力让烟花“真”起来的物理参数看完粒子对象紧接着要读的就是物理更新逻辑。一个看起来“假”的烟花和“真”的烟花差别往往不在贴图而在物理模型是否正确。很多初学者直接把速度每帧加一个固定偏移看起来像线性移动其实一点都不真实。常见做法是把运动拆成速度与位置两个维度位置每帧累加速度速度每帧受重力和阻力修正顺序一定要先更新速度再更新位置否则会出现“下一帧的位置其实用的是上一帧速度”的偏差。function updateParticle(p) { p.vy p.gravity; // 重力修正速度每帧向下叠加 p.vx * p.drag; // 空气阻力修正速度每帧衰减 p.vy * p.drag; p.x p.vx; // 用修正后的速度更新位置 p.y p.vy; p.alpha - 0.006; // 透明度逐步衰减 p.life--; // 生命周期递减 if (p.life 0) { // 生命结束回收粒子 p.active false; p.alpha 0; } }逻辑说明gravity只作用在vyy轴速度上这是模拟重力方向向下的自然结果。如果哪天你想要“流星从天而降”的效果就该把gravity设为负值让粒子向上被“吸”。drag同时作用在vx和vy上模拟空气阻力对两个方向速度的平均衰减。alpha每帧固定减少0.006意味着粒子大约在100至150帧内从完全不透明淡到看不见对应60帧率下约2秒左右的消散过程。参数说明这一组物理参数里最需要调的是gravity。我实拆过几种烟花源码很多效果翻车都是因为gravity设得太大——比如调到0.5升空阶段的“炮弹”还没走到画面三分之一就被拽下来了爆炸点全堆在屏幕底部。合理的经验区间是0.05到0.15之间配合60帧率烟花能升到画面40%到70%的高度以后再炸开。drag则影响轨迹形态0.98是通用值粒子弧线自然想做出“散得很开”的效果就调到0.99想让火花快速坠地消失就调到0.95。2.3 颜色渐变机制从亮白到红橙再到消散灰暗烟花颜色的“逼真感”很大程度上来自颜色随时间的渐变。现实中的烟花是先看到爆开发出的亮白光然后颜色才慢慢浮现并加深最后燃烧殆尽变成暗灰色。常见做法是给粒子存一组基准RGB和一个当前颜色在构造函数里随机生成爆炸粒子的基准色在更新循环里根据生命周期比例做插值。function blendColor(rgb, lifeRatio) { const start [255, 255, 255]; // 爆炸瞬间的亮白 const end [80, 80, 80]; // 消散前的暗灰 const blend lifeRatio; // 0到11为刚爆炸 return [ start[0] * blend end[0] * (1 - blend) rgb[0] * 0.2, start[1] * blend end[1] * (1 - blend) rgb[1] * 0.2, start[2] * blend end[2] * (1 - blend) rgb[2] * 0.2 ]; }逻辑说明lifeRatio是粒子剩余寿命占总寿命的比例。刚爆炸时比值接近1颜色以亮白为主符合真实烟花先白后彩的视觉特征接近消散时比值趋近0颜色往暗灰走粒子会自然地“暗下去”而不是突然消失。基准RGB里的0.2权重是为了让粒子在中间阶段仍然带一点自身色彩否则整个烟花看起来只是从白到灰没有颜色变化层次。参数说明想改烟花颜色时一般有两个入口。一个是直接在粒子生成时修改随机颜色选取范围比如把RGB的随机区间从“任意0到255”改成“R偏大、G适中、B偏小”会得到偏暖色的烟花另一个是调整blendColor里的start值start越亮烟花爆开瞬间的光感越强。对于这套源码里的“炫酷”效果我建议只调基准色入口不要动start和end否则夜空中会失去亮白高光瞬间整体观感会偏“塑料”。3. 从源码到实战打开、运行、复现这份烟花特效3.1 解压后先确认这几个文件拿到的“仿真烟花.rar”打开后里面有使用说明图片和三个实际生效的文件。第一次运行前先确认一次目录结构是完整解压后的——不要只把index.html单独拖出来那样会丢背景素材页面默认是白底黑字烟花还是能炸但视觉效果直接降级。文件作用运行必需index.html全部粒子逻辑、渲染与交互代码必须city.png城市夜景背景底图绘制在canvas下层建议保留moon.png夜空月亮素材叠加在背景和烟花之间建议保留仿真烟花 使用必读.png资源使用说明运行前先看一遍非必需用浏览器直接打开index.html即可运行。它不依赖任何构建工具、npm包或框架几KB的纯JavaScript干完全部事情。如果想在移动端看效果把整个目录放到任意一个静态托管服务里拿到地址再访问会比直接用手机浏览器打开本地文件路径更稳。提示运行前先把压缩包完整解压到同一个目录确认index.html、city.png、moon.png三者同级。3.2 图层叠加逻辑city.png、moon.png与canvas的前后关系这份特效的画面不是一张静态图而是三个图层组合出来的“夜景”。拆开看顺序大概是最底层是city.png的城市天际线第二层是canvas绘制的烟花层最上层是moon.png的月亮。之所以canvas在背景和月亮之间是因为烟花爆开的火花会从城市建筑后面升起但会“越过”月亮前面——这个图层顺序决定了视觉上烟花的空间高度感。常见做法是在HTML里用CSS定位和z-index来排列这三个图层而不是把背景画进canvas里。这样背景图不会随粒子的残影效果一起被“盖黑”后面避坑章会展开这一点。我给一个推荐的DOM结构参考div classfirework-stage img srccity.png classlayer-city alt城市背景 / canvas idmainCanvas classlayer-canvas/canvas img srcmoon.png classlayer-moon alt月亮 / /div.firework-stage { position: relative; width: 100vw; height: 100vh; overflow: hidden; } .layer-city { position: absolute; bottom: 0; width: 100%; z-index: 1; } .layer-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .layer-moon { position: absolute; top: 8%; right: 12%; z-index: 3; }逻辑说明city.png使用绝对定位贴在底部宽度撑满容器城市天际线就停留在画面底端canvas覆盖整个窗口作为特效主层moon.png放在右上角附近并置于顶层。三个图层的z-index顺序按1、2、3排列写的时候最容易被忽略的是canvas默认没有position样式时z-index会被浏览器自动重置所以一定给canvas也写上position: absolute。参数说明上面示例里moon的top和right就是可以随手改的位置。如果想营造“月色烟花大会”的氛围可以把moon的尺寸调大并把位置往画面中心挪但注意一定让月亮在canvas的z-index之上否则烟花火花绘制到画面上会把月亮“压住”看起来就像月亮凭空消失了。3.3 核心参数怎么调粒子数量、爆炸高度、轨迹拖尾跑通之后下一步必然是想让它更“炫”或者更“柔”。我建议第一步先找index.html里的核心配置区通常写在文件前半部分可能是config对象也可能是一组常量。常见做法是这些参数集中放在一个代码块里const CONFIG { autoLaunchInterval: 1200, // 自动发射间隔单位毫秒 maxActiveParticles: 1200, // 同时存活的粒子总数上限 explosionParticleCount: 110, // 每次爆炸生成的火花粒子数 gravity: 0.08, // 重力系数 drag: 0.98, // 空气阻力系数 launchBaseY: 0.8, // 发射点y坐标取画布高度的比例 explosionHeightLength: 0.55 // 爆炸高度计算系数 };逻辑说明autoLaunchInterval控制烟花发射节奏值越小画面越密集但密集到一定程度就分不清单发烟花观感反而像爆炸烟雾常见活动页放在1200毫秒左右即可。explosionParticleCount是每发烟花爆出的火花数量110个是一个均衡值画面有内容又不会瞬间把粒子池耗尽。launchBaseY取画布高度的80%位置作为发射点对应城市天际线之上的区域这个值如果设成1.0烟花就会从屏幕底部画面外发射视觉不完整。参数说明调整优先级我一般排序是explosionParticleCount → autoLaunchInterval → gravity → drag。前两个对视觉密度影响最直接每次调的时候只改一个参数刷新看效果避免多个参数互相遮盖问题这样才定位得准。后面避坑章里提到的“烟花底部爆炸”问题根源就在gravity与explosionHeightLength不匹配改了gravity就得重新跑一遍看爆炸点位置。4. 屏蔽底噪的渲染优化粒子上限、拖尾处理与多设备兼容4.1 粒子数量与性能瓶颈先算清楚上限在哪粒子系统的性能瓶颈几乎集中在两个循环更新循环和绘制循环。每增加一个粒子每帧都要做一次位置更新、透明度衰减、存活判断和绘制调用。当同时存活的粒子从100涨到1000工作量是线性增长从1000涨到5000密集绘制时就会出现明显的掉帧尤其是在手机浏览器上。常见做法是给粒子加一个池子每次需要新粒子时不是new一个对象而是从池子里取一个active为false的对象复用。创建新对象和销毁对象在大量高频运算里成本很高复用避免了内存抖动。上面Particle类里预留的active字段就是干这个的“爆炸生成”是生产者“绘制回收”是消费者两者通过这个标志位通信。const pool []; function getParticle(x, y, vx, vy) { // 先找池子里有没有可复用的对象 for (let i 0; i pool.length; i) { if (!pool[i].active) { initParticle(pool[i], x, y, vx, vy); return pool[i]; } } // 池子里没有空位新建一个 const p new Particle(x, y, vx, vy); pool.push(p); return p; }逻辑说明getParticle每帧被调用很多次先从池子里查找可复用粒子只有全部活跃时才新建。这一步把“大量new和垃圾回收”这个隐形消耗按住了特别适合烟花这类瞬间产生大量粒子的场景——一发爆炸就要生成上百个对象如果没有池子每轮爆炸都会触发一批对象创建和内存回收几十发之后卡顿感就上来了。参数说明maxActiveParticles这个上限值决定了池子的最大规模。1200是性能均衡点使用Canvas 2D绘制1200个圆形粒子在主流设备上不会有压力超过2000就要注意低端手机的CPU占用。如果想做“全屏烟火大会”这种高密度效果建议把池子上限提到3000附近同时把单发爆炸的粒子数降到70左右用总数不变换取更密集的发射频率画面反而更有层次。4.2 拖尾与残影半透明覆盖和clearRect的取舍烟花在夜空中的轨迹拖尾是“逼真感”的大头。实现拖尾最常用的技巧不是给粒子加长条形的拖尾贴图而是在每帧绘制前用半透明黑色矩形覆盖画布。这样上一帧画出的粒子会被压暗但不会被完全擦掉形成自然的残影渐隐效果。真正的坑点在于很多新手会让clearRect把上一帧清得干干净净——那样拖尾直接消失烟花会变成“一堆跳动的亮点”非常不自然。function renderFrame(ctx, bgImg) { // 先绘制背景图确保背景不被残影盖黑 if (bgImg) ctx.drawImage(bgImg, 0, 0, ctx.canvas.width, ctx.canvas.height); // 半透明黑色覆盖实现拖尾渐隐 ctx.fillStyle rgba(0, 0, 0, 0.2); ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // 绘制所有活跃粒子 for (const p of pool) { if (!p.active) continue; ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, Math.PI * 2); ctx.fillStyle rgba(${p.color[0]}, ${p.color[1]}, ${p.color[2]}, ${p.alpha}); ctx.fill(); } }逻辑说明注意drawImage背景图被放在了半透明黑层之前。如果背景绘制放在残影覆盖之后背景图每帧也会被那层半透明黑盖住——运行几十秒后你会发现背景越来越黑最后整个画面沉入夜色中。这个顺序是很多通宵调视觉的同行踩过的坑也是粒子系统里“先画背景还是先画残影”的经典顺序问题。参数说明半透明黑的alpha值0.2直接控制拖尾长度。数值越小拖尾越长0.1适合想要丝滑长尾的效果数值越大拖尾越短0.35以上会出现前帧粒子几乎立即消失的“点状烟花”效果。我每次调完这个值都会看三秒烟花轨迹确认残影是均匀渐隐而不是闪烁。4.3 多分辨率适配DPR、画布尺寸和发射坐标一起处理如果只在桌面端打开这一节可以跳过但项目一旦放到手机上就会出现“模糊的烟花”问题。原因很简单canvas的width和height属性决定了实际绘制像素而CSS的width和height决定它在页面上显示的大小。当两者不一致时浏览器会对canvas内容做拉伸看起来就糊了。常见解法是按devicePixelRatio缩放画布。const canvas document.getElementById(mainCanvas); const dpr window.devicePixelRatio || 1; canvas.width canvas.clientWidth * dpr; canvas.height canvas.clientHeight * dpr; const ctx canvas.getContext(2d); ctx.scale(dpr, dpr);逻辑说明先取设备像素比devicePixelRatio普通显示器通常为1手机在2到3之间。把canvas的实际分辨率乘上dpr再通过ctx.scale把坐标系放大后面所有绘制代码的坐标仍以CSS像素为单位但实际渲染到屏幕上时有了足够多的物理像素显示就清晰了。这个步骤放在任何canvas项目里都适用不限于烟花。参数说明由于canvas的实际尺寸改变了前面CONFIG里的launchBaseY、explosionHeightLength等比例参数依然有效但所有绝对像素的参数比如发射点x坐标写死了600就需要同步改造。实践中的准则是把所有和坐标相关的参数都写成画布宽度或高度的比例值例如const xPos canvas.clientWidth * 0.5;这样换设备后才不会出现烟花只集中在左上角一小块区域的尴尬。还有一个经常被忽略的场景窗口尺寸变化。桌面端拖拽窗口宽度或者手机横竖屏切换canvas的clientWidth和clientHeight会变化但canvas本身的width和height如果不重新设置画面会被拉伸或压缩。常见做法是监听resize事件重新读取clientWidth乘以DPR并重新scale。如果背景图也要跟着缩放直接用CSS给img设宽度100%即可不要用固定像素值。5. 避坑与常见问题烟花不炸、画面卡顿、白屏的排查记录这个资源跑一遍不难但真正上手改参时有几类问题基本上是每个拆过粒子系统的人都见过的。下面几条是我在模拟项目X里实打实调试过的坑按“现象—原因—解决”的顺序写遇到类似情况直接对照排查。5.1 双击index.html白屏只看到一片灰或黑原因最常见的不是代码坏了而是素材没有一起解压。index.html里通过相对路径引用city.png和moon.png如果你只把html文件单独拖出来或者把两个图片文件的位置挪了浏览器就会加载不到背景素材同时canvas仍在运行结果就是黑底加几颗亮点看起来像白屏。另一种可能是相对路径写成了“/city.png”这种以斜杠开头的写法本地双击时会解析到盘符根目录找不到文件。解决检查目录结构是否完整index.html、city.png、moon.png必须位于同一目录下。把以斜杠开头的路径改成相对路径“city.png”。如果已经放在同一个目录还白屏换成现代浏览器Chrome或Edge再打开一次排除旧浏览器对canvas支持不全的问题。5.2 烟花全在屏幕底部30%以内爆炸升不上去原因gravity设得过大或者爆炸高度判定用的是绝对像素。之前有一次贪效果把gravity从0.08调到0.35粒子初速度完全顶不住往下拽的力度上升段在屏幕下方就减速为零然后炸成一团近距离火花观感像地面放鞭炮。如果用绝对像素判断爆炸点比如固定y400时爆炸屏幕换小之后这个坐标可能已经接近画面顶部烟花升不动。解决用比例系数判断爆炸高度例如把爆炸触发条件写成y canvas.clientHeight * 0.35意思是粒子升到画布高度35%位置就爆炸。gravity回落至0.05到0.15区间再配合explosionHeightLength一起调。改完gravity后连续看三发烟花的升空轨迹确认爆炸点分布在画面中部以上再继续调下一个参数。5.3 连续发射几发之后画面越来越卡最后卡死原因粒子池或粒子数组没有做上限裁剪。爆炸持续生成新粒子而老粒子的active标志位没有被检测或检测了但没有复用导致每一帧要更新的粒子数无限膨胀。这个问题的隐蔽之处在于前20秒看不出卡因为粒子量还在几百发到第20发以后可能就积到几千个移动端直接卡成PPT。解决在粒子生成入口和更新循环里各加一道检查。生成时判断当前存活粒子数是否已到maxActiveParticles到了就先全局回收最老的一批更新循环里每帧过滤active为false的粒子不进入后续绘制逻辑。最简单粗暴的兜底写法是在update里加上一句if (activeCount max) { particles[0].active false; }虽然不优雅但能立刻止住内存膨胀。5.4 手机浏览器上画面模糊弧线边缘发虚原因没有适配devicePixelRatiocanvas的实际分辨率小于CSS显示尺寸。桌面端DPR接近1问题不明显手机DPR是2到3canvas内容被强行放大后糊得厉害。如果你发现手机上看烟花边缘有一圈锯齿基本就是这个原因。解决按第4.3节的DPR方案处理在初始化时把canvas.width设为clientWidth乘dpr再用ctx.scale(dpr, dpr)。注意要在设置canvas尺寸之后再获取ctx顺序反了会导致scale作用在旧的坐标系上前面画的东西仍然模糊。改完之后用手机浏览器实际访问一次放大画面看粒子边缘是否锐利。5.5 月亮图层消失了换个浏览器又出现原因moon.png的定位元素可能被canvas盖住或者浏览器对canvas默认样式处理不同。canvas有时会自动带上内联尺寸属性导致显示层叠顺序不稳定还有可能是因为img元素没有显式设置z-index而canvas的z-index在某种渲染模式下默认更高。解决给canvas和月亮分别设置z-index保证canvas是2、月亮是3且两者的position都要设置为relative或absolute。如果条件允许把moon.png的绘制也直接搬到canvas里在粒子绘制之前drawImage上去这样图层关系由代码完全掌控不同浏览器的表现会统一。6. 把烟花升级成可交互的点击发射、参数联动与验证清单6.1 监听canvas点击事件把这份静态烟花变成可交互的只需要在canvas上挂一个click监听。坐标要转换因为canvas在页面上可能有偏移。常见做法是使用getBoundingClientRect计算点击位置相对canvas左上角的坐标再把这个坐标作为烟花发射的x和y。发射后保持原有物理规则不变用户点的位置就是爆炸中心。canvas.addEventListener(click, (e) { const rect canvas.getBoundingClientRect(); const startX e.clientX - rect.left; const startY e.clientY - rect.top; launchFirework(startX, startY); });逻辑说明launchFirework内部创建炮弹粒子给一个向上的初速度并把这颗炮弹的爆炸高度定为点击点的y坐标。这样用户点屏幕哪里烟花就在哪里绽开交互感直观。如果你希望点击后烟花从底部升起再在点击位置炸开就把点击点的y值当作“爆炸目标高度”而不是发射起点。参数说明如果想限制点击发射的频率可以在launchFirework里加一个时间戳判断例如两次发射间隔不得小于200毫秒。否则用户快速连点时瞬间爆出大量粒子前面设置好的粒子池上限也会被顶穿。6.2 做一个最小可用的调参面板如果不想引入外部库直接在index.html底部追加几个range类型的input就能完成参数联动。每次用户调整滑块把CONFIG里的对应字段改掉下一发烟花立即生效。实践里的做法是把滑块的值直接绑定到CONFIG对象上。6.3 调参后的效果验证清单参数推荐区间设置后观察点gravity0.05-0.15烟花能否升到画面中上部再爆炸drag0.95-0.99火花散开弧线是否自然explosionParticleCount80-200单发烟花密度是否足够maxActiveParticles800-3000连续10发后帧率是否稳定半透明黑alpha0.15-0.35拖尾是长尾还是点状这套源码的边界很清楚它是基于2D canvas的粒子特效不是3D渲染也没有音频引擎但作为活动页背景、晚会开场倒计时、个人页面点缀已经完全够用。如果你要的是“非常逼真的三维光影烟花”那得换WebGL方案这份资源做不到也不该被要求做到——但它相当适合用来理解粒子系统的基本运转逻辑。那次给模拟项目X调年会背景我图省事直接把gravity拉到0.5结果全场烟花都在屏幕底部炸开观感像一群地面火炮之后被迫花了半小时把参数一个个往回捋。从那以后我每次调粒子系统都会强制先看三个值重力系数、粒子池上限、DPR适配确认这三者没问题再碰颜色和拖尾。希望这篇拆解帮到你——把这套源码跑起来、拆开看明白你就已经摸到粒子系统从“能跑”到“好看”之间最重要的那段路。本文还有配套的精品资源点击获取 
长河君 · 2026/10/22 9:16:12 · 阅读 1.2k 仿真烟花背后的Canvas粒子系统：原理剖析与调优实战
简介这是一款基于粒子系统与物理模拟的仿真烟花特效源码包面向Web前端开发、游戏特效设计及图形学学习者用于快速搭建可交互的炫酷烟花动画。资源共4个文件包括1个核心HTML页面与3张PNG素材其中HTML承载粒子发射、重力计算、颜色渐变与音效联动等完整逻辑PNG则提供城市背景、月球贴图及使用说明等辅助元素压缩包仅321KB轻量易部署。目前已有814人学习下载适合在网页展示、活动页面或教学演示中直接嵌入使用。通过研读代码可掌握粒子系统生命周期管理、随机运动轨迹模拟、纹理映射与性能优化思路并了解如何结合用户点击触发烟花位置与数量控制是一份兼顾观赏性与教学价值的极简前端特效案例。1. 仿真烟花一份单文件HTML里藏着粒子系统的完整实现烟花特效这类视觉很多人的第一反应是找视频素材或者上重型引擎但真正的“逼真”其实不需要那么重的方案——基于粒子系统的纯前端实现几百行JavaScript加上一张夜景底图就能在浏览器里跑出完整的烟花秀。这份“仿真烟花”资源正是这么个东西index.html承载全部特效逻辑city.png与moon.png把夜空铺好解压后双击就能看到升空、爆炸、散落、消散的完整过程。它特别适合两类人一类是要给活动页、年会背景、电子贺卡找炫酷视觉的前端开发者另一类是刚接触粒子系统、不想一上来啃WebGL的爱好者。读懂这套canvas实现之后礼花、星空、烟雾这些特效你都能顺手改出来。2. 先看懂原理粒子生命周期、物理模型与颜色演变2.1 粒子系统的三个核心生命周期阶段粒子系统本质上就是大量微小几何对象各带一套状态参数在每一帧里更新状态然后绘制出来。烟花特效的粒子会经历三个阶段升空、爆炸、消散。升空阶段你看到的其实是一个“炮弹”粒子在往上飞它带着初速度、颜色和上升方向到达指定高度后这个炮弹粒子“死亡”同时瞬间生成大量火花粒子这就是爆炸火花粒子继承发射点的位置各自朝不同方向飞出去在重力和空气阻力作用下逐渐减速、变色、变小最后透明度归零被回收。拆这份源码的时候我一般会先在代码里找到粒子对象的定义把所有属性列出来对应到这三个阶段上。常见做法是这样定义粒子对象class Particle { constructor(x, y, vx, vy) { this.x x; // 当前x坐标单位像素 this.y y; // 当前y坐标单位像素 this.vx vx; // x轴速度正右负左 this.vy vy; // y轴速度正下负上 this.gravity 0.08; // 单帧重力加速度 this.drag 0.98; // 空气阻力系数每帧乘一次 this.color [255, 255, 255];// 当前RGB颜色数组 this.alpha 1.0; // 透明度1为完全不透明 this.life 120; // 剩余帧数每帧减1 this.active true; // 是否存活false时回收复用 } }逻辑说明以上每个字段都是粒子系统运行时的最小必需项。active字段是性能优化的关键当粒子生命周期结束、透明度归零时并不是直接从一个数组中删掉它——删除数组元素在JavaScript里代价较高常见做法是把它标记为false让后续的粒子池直接覆盖复用。life字段用来控制粒子存活时间它决定了一场烟花从爆开到消散能持续多久值越大烟花尾巴越长、飘散轨迹越完整。参数说明在解压后的index.html里你大概率能看到一个config对象或几行常量定义。重力gravity是“升空”阶段最重要的参数后面会专门讲drag是每帧乘在速度上的系数取值范围通常在0.95到0.99之间0.95时粒子会很快“刹住”停在空中飘0.99时粒子会在屏幕上拉出很长的弧线更像深夜烟花在风里散开的状态。2.2 重力与空气阻力让烟花“真”起来的物理参数看完粒子对象紧接着要读的就是物理更新逻辑。一个看起来“假”的烟花和“真”的烟花差别往往不在贴图而在物理模型是否正确。很多初学者直接把速度每帧加一个固定偏移看起来像线性移动其实一点都不真实。常见做法是把运动拆成速度与位置两个维度位置每帧累加速度速度每帧受重力和阻力修正顺序一定要先更新速度再更新位置否则会出现“下一帧的位置其实用的是上一帧速度”的偏差。function updateParticle(p) { p.vy p.gravity; // 重力修正速度每帧向下叠加 p.vx * p.drag; // 空气阻力修正速度每帧衰减 p.vy * p.drag; p.x p.vx; // 用修正后的速度更新位置 p.y p.vy; p.alpha - 0.006; // 透明度逐步衰减 p.life--; // 生命周期递减 if (p.life 0) { // 生命结束回收粒子 p.active false; p.alpha 0; } }逻辑说明gravity只作用在vyy轴速度上这是模拟重力方向向下的自然结果。如果哪天你想要“流星从天而降”的效果就该把gravity设为负值让粒子向上被“吸”。drag同时作用在vx和vy上模拟空气阻力对两个方向速度的平均衰减。alpha每帧固定减少0.006意味着粒子大约在100至150帧内从完全不透明淡到看不见对应60帧率下约2秒左右的消散过程。参数说明这一组物理参数里最需要调的是gravity。我实拆过几种烟花源码很多效果翻车都是因为gravity设得太大——比如调到0.5升空阶段的“炮弹”还没走到画面三分之一就被拽下来了爆炸点全堆在屏幕底部。合理的经验区间是0.05到0.15之间配合60帧率烟花能升到画面40%到70%的高度以后再炸开。drag则影响轨迹形态0.98是通用值粒子弧线自然想做出“散得很开”的效果就调到0.99想让火花快速坠地消失就调到0.95。2.3 颜色渐变机制从亮白到红橙再到消散灰暗烟花颜色的“逼真感”很大程度上来自颜色随时间的渐变。现实中的烟花是先看到爆开发出的亮白光然后颜色才慢慢浮现并加深最后燃烧殆尽变成暗灰色。常见做法是给粒子存一组基准RGB和一个当前颜色在构造函数里随机生成爆炸粒子的基准色在更新循环里根据生命周期比例做插值。function blendColor(rgb, lifeRatio) { const start [255, 255, 255]; // 爆炸瞬间的亮白 const end [80, 80, 80]; // 消散前的暗灰 const blend lifeRatio; // 0到11为刚爆炸 return [ start[0] * blend end[0] * (1 - blend) rgb[0] * 0.2, start[1] * blend end[1] * (1 - blend) rgb[1] * 0.2, start[2] * blend end[2] * (1 - blend) rgb[2] * 0.2 ]; }逻辑说明lifeRatio是粒子剩余寿命占总寿命的比例。刚爆炸时比值接近1颜色以亮白为主符合真实烟花先白后彩的视觉特征接近消散时比值趋近0颜色往暗灰走粒子会自然地“暗下去”而不是突然消失。基准RGB里的0.2权重是为了让粒子在中间阶段仍然带一点自身色彩否则整个烟花看起来只是从白到灰没有颜色变化层次。参数说明想改烟花颜色时一般有两个入口。一个是直接在粒子生成时修改随机颜色选取范围比如把RGB的随机区间从“任意0到255”改成“R偏大、G适中、B偏小”会得到偏暖色的烟花另一个是调整blendColor里的start值start越亮烟花爆开瞬间的光感越强。对于这套源码里的“炫酷”效果我建议只调基准色入口不要动start和end否则夜空中会失去亮白高光瞬间整体观感会偏“塑料”。3. 从源码到实战打开、运行、复现这份烟花特效3.1 解压后先确认这几个文件拿到的“仿真烟花.rar”打开后里面有使用说明图片和三个实际生效的文件。第一次运行前先确认一次目录结构是完整解压后的——不要只把index.html单独拖出来那样会丢背景素材页面默认是白底黑字烟花还是能炸但视觉效果直接降级。文件作用运行必需index.html全部粒子逻辑、渲染与交互代码必须city.png城市夜景背景底图绘制在canvas下层建议保留moon.png夜空月亮素材叠加在背景和烟花之间建议保留仿真烟花 使用必读.png资源使用说明运行前先看一遍非必需用浏览器直接打开index.html即可运行。它不依赖任何构建工具、npm包或框架几KB的纯JavaScript干完全部事情。如果想在移动端看效果把整个目录放到任意一个静态托管服务里拿到地址再访问会比直接用手机浏览器打开本地文件路径更稳。提示运行前先把压缩包完整解压到同一个目录确认index.html、city.png、moon.png三者同级。3.2 图层叠加逻辑city.png、moon.png与canvas的前后关系这份特效的画面不是一张静态图而是三个图层组合出来的“夜景”。拆开看顺序大概是最底层是city.png的城市天际线第二层是canvas绘制的烟花层最上层是moon.png的月亮。之所以canvas在背景和月亮之间是因为烟花爆开的火花会从城市建筑后面升起但会“越过”月亮前面——这个图层顺序决定了视觉上烟花的空间高度感。常见做法是在HTML里用CSS定位和z-index来排列这三个图层而不是把背景画进canvas里。这样背景图不会随粒子的残影效果一起被“盖黑”后面避坑章会展开这一点。我给一个推荐的DOM结构参考div classfirework-stage img srccity.png classlayer-city alt城市背景 / canvas idmainCanvas classlayer-canvas/canvas img srcmoon.png classlayer-moon alt月亮 / /div.firework-stage { position: relative; width: 100vw; height: 100vh; overflow: hidden; } .layer-city { position: absolute; bottom: 0; width: 100%; z-index: 1; } .layer-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .layer-moon { position: absolute; top: 8%; right: 12%; z-index: 3; }逻辑说明city.png使用绝对定位贴在底部宽度撑满容器城市天际线就停留在画面底端canvas覆盖整个窗口作为特效主层moon.png放在右上角附近并置于顶层。三个图层的z-index顺序按1、2、3排列写的时候最容易被忽略的是canvas默认没有position样式时z-index会被浏览器自动重置所以一定给canvas也写上position: absolute。参数说明上面示例里moon的top和right就是可以随手改的位置。如果想营造“月色烟花大会”的氛围可以把moon的尺寸调大并把位置往画面中心挪但注意一定让月亮在canvas的z-index之上否则烟花火花绘制到画面上会把月亮“压住”看起来就像月亮凭空消失了。3.3 核心参数怎么调粒子数量、爆炸高度、轨迹拖尾跑通之后下一步必然是想让它更“炫”或者更“柔”。我建议第一步先找index.html里的核心配置区通常写在文件前半部分可能是config对象也可能是一组常量。常见做法是这些参数集中放在一个代码块里const CONFIG { autoLaunchInterval: 1200, // 自动发射间隔单位毫秒 maxActiveParticles: 1200, // 同时存活的粒子总数上限 explosionParticleCount: 110, // 每次爆炸生成的火花粒子数 gravity: 0.08, // 重力系数 drag: 0.98, // 空气阻力系数 launchBaseY: 0.8, // 发射点y坐标取画布高度的比例 explosionHeightLength: 0.55 // 爆炸高度计算系数 };逻辑说明autoLaunchInterval控制烟花发射节奏值越小画面越密集但密集到一定程度就分不清单发烟花观感反而像爆炸烟雾常见活动页放在1200毫秒左右即可。explosionParticleCount是每发烟花爆出的火花数量110个是一个均衡值画面有内容又不会瞬间把粒子池耗尽。launchBaseY取画布高度的80%位置作为发射点对应城市天际线之上的区域这个值如果设成1.0烟花就会从屏幕底部画面外发射视觉不完整。参数说明调整优先级我一般排序是explosionParticleCount → autoLaunchInterval → gravity → drag。前两个对视觉密度影响最直接每次调的时候只改一个参数刷新看效果避免多个参数互相遮盖问题这样才定位得准。后面避坑章里提到的“烟花底部爆炸”问题根源就在gravity与explosionHeightLength不匹配改了gravity就得重新跑一遍看爆炸点位置。4. 屏蔽底噪的渲染优化粒子上限、拖尾处理与多设备兼容4.1 粒子数量与性能瓶颈先算清楚上限在哪粒子系统的性能瓶颈几乎集中在两个循环更新循环和绘制循环。每增加一个粒子每帧都要做一次位置更新、透明度衰减、存活判断和绘制调用。当同时存活的粒子从100涨到1000工作量是线性增长从1000涨到5000密集绘制时就会出现明显的掉帧尤其是在手机浏览器上。常见做法是给粒子加一个池子每次需要新粒子时不是new一个对象而是从池子里取一个active为false的对象复用。创建新对象和销毁对象在大量高频运算里成本很高复用避免了内存抖动。上面Particle类里预留的active字段就是干这个的“爆炸生成”是生产者“绘制回收”是消费者两者通过这个标志位通信。const pool []; function getParticle(x, y, vx, vy) { // 先找池子里有没有可复用的对象 for (let i 0; i pool.length; i) { if (!pool[i].active) { initParticle(pool[i], x, y, vx, vy); return pool[i]; } } // 池子里没有空位新建一个 const p new Particle(x, y, vx, vy); pool.push(p); return p; }逻辑说明getParticle每帧被调用很多次先从池子里查找可复用粒子只有全部活跃时才新建。这一步把“大量new和垃圾回收”这个隐形消耗按住了特别适合烟花这类瞬间产生大量粒子的场景——一发爆炸就要生成上百个对象如果没有池子每轮爆炸都会触发一批对象创建和内存回收几十发之后卡顿感就上来了。参数说明maxActiveParticles这个上限值决定了池子的最大规模。1200是性能均衡点使用Canvas 2D绘制1200个圆形粒子在主流设备上不会有压力超过2000就要注意低端手机的CPU占用。如果想做“全屏烟火大会”这种高密度效果建议把池子上限提到3000附近同时把单发爆炸的粒子数降到70左右用总数不变换取更密集的发射频率画面反而更有层次。4.2 拖尾与残影半透明覆盖和clearRect的取舍烟花在夜空中的轨迹拖尾是“逼真感”的大头。实现拖尾最常用的技巧不是给粒子加长条形的拖尾贴图而是在每帧绘制前用半透明黑色矩形覆盖画布。这样上一帧画出的粒子会被压暗但不会被完全擦掉形成自然的残影渐隐效果。真正的坑点在于很多新手会让clearRect把上一帧清得干干净净——那样拖尾直接消失烟花会变成“一堆跳动的亮点”非常不自然。function renderFrame(ctx, bgImg) { // 先绘制背景图确保背景不被残影盖黑 if (bgImg) ctx.drawImage(bgImg, 0, 0, ctx.canvas.width, ctx.canvas.height); // 半透明黑色覆盖实现拖尾渐隐 ctx.fillStyle rgba(0, 0, 0, 0.2); ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // 绘制所有活跃粒子 for (const p of pool) { if (!p.active) continue; ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, Math.PI * 2); ctx.fillStyle rgba(${p.color[0]}, ${p.color[1]}, ${p.color[2]}, ${p.alpha}); ctx.fill(); } }逻辑说明注意drawImage背景图被放在了半透明黑层之前。如果背景绘制放在残影覆盖之后背景图每帧也会被那层半透明黑盖住——运行几十秒后你会发现背景越来越黑最后整个画面沉入夜色中。这个顺序是很多通宵调视觉的同行踩过的坑也是粒子系统里“先画背景还是先画残影”的经典顺序问题。参数说明半透明黑的alpha值0.2直接控制拖尾长度。数值越小拖尾越长0.1适合想要丝滑长尾的效果数值越大拖尾越短0.35以上会出现前帧粒子几乎立即消失的“点状烟花”效果。我每次调完这个值都会看三秒烟花轨迹确认残影是均匀渐隐而不是闪烁。4.3 多分辨率适配DPR、画布尺寸和发射坐标一起处理如果只在桌面端打开这一节可以跳过但项目一旦放到手机上就会出现“模糊的烟花”问题。原因很简单canvas的width和height属性决定了实际绘制像素而CSS的width和height决定它在页面上显示的大小。当两者不一致时浏览器会对canvas内容做拉伸看起来就糊了。常见解法是按devicePixelRatio缩放画布。const canvas document.getElementById(mainCanvas); const dpr window.devicePixelRatio || 1; canvas.width canvas.clientWidth * dpr; canvas.height canvas.clientHeight * dpr; const ctx canvas.getContext(2d); ctx.scale(dpr, dpr);逻辑说明先取设备像素比devicePixelRatio普通显示器通常为1手机在2到3之间。把canvas的实际分辨率乘上dpr再通过ctx.scale把坐标系放大后面所有绘制代码的坐标仍以CSS像素为单位但实际渲染到屏幕上时有了足够多的物理像素显示就清晰了。这个步骤放在任何canvas项目里都适用不限于烟花。参数说明由于canvas的实际尺寸改变了前面CONFIG里的launchBaseY、explosionHeightLength等比例参数依然有效但所有绝对像素的参数比如发射点x坐标写死了600就需要同步改造。实践中的准则是把所有和坐标相关的参数都写成画布宽度或高度的比例值例如const xPos canvas.clientWidth * 0.5;这样换设备后才不会出现烟花只集中在左上角一小块区域的尴尬。还有一个经常被忽略的场景窗口尺寸变化。桌面端拖拽窗口宽度或者手机横竖屏切换canvas的clientWidth和clientHeight会变化但canvas本身的width和height如果不重新设置画面会被拉伸或压缩。常见做法是监听resize事件重新读取clientWidth乘以DPR并重新scale。如果背景图也要跟着缩放直接用CSS给img设宽度100%即可不要用固定像素值。5. 避坑与常见问题烟花不炸、画面卡顿、白屏的排查记录这个资源跑一遍不难但真正上手改参时有几类问题基本上是每个拆过粒子系统的人都见过的。下面几条是我在模拟项目X里实打实调试过的坑按“现象—原因—解决”的顺序写遇到类似情况直接对照排查。5.1 双击index.html白屏只看到一片灰或黑原因最常见的不是代码坏了而是素材没有一起解压。index.html里通过相对路径引用city.png和moon.png如果你只把html文件单独拖出来或者把两个图片文件的位置挪了浏览器就会加载不到背景素材同时canvas仍在运行结果就是黑底加几颗亮点看起来像白屏。另一种可能是相对路径写成了“/city.png”这种以斜杠开头的写法本地双击时会解析到盘符根目录找不到文件。解决检查目录结构是否完整index.html、city.png、moon.png必须位于同一目录下。把以斜杠开头的路径改成相对路径“city.png”。如果已经放在同一个目录还白屏换成现代浏览器Chrome或Edge再打开一次排除旧浏览器对canvas支持不全的问题。5.2 烟花全在屏幕底部30%以内爆炸升不上去原因gravity设得过大或者爆炸高度判定用的是绝对像素。之前有一次贪效果把gravity从0.08调到0.35粒子初速度完全顶不住往下拽的力度上升段在屏幕下方就减速为零然后炸成一团近距离火花观感像地面放鞭炮。如果用绝对像素判断爆炸点比如固定y400时爆炸屏幕换小之后这个坐标可能已经接近画面顶部烟花升不动。解决用比例系数判断爆炸高度例如把爆炸触发条件写成y canvas.clientHeight * 0.35意思是粒子升到画布高度35%位置就爆炸。gravity回落至0.05到0.15区间再配合explosionHeightLength一起调。改完gravity后连续看三发烟花的升空轨迹确认爆炸点分布在画面中部以上再继续调下一个参数。5.3 连续发射几发之后画面越来越卡最后卡死原因粒子池或粒子数组没有做上限裁剪。爆炸持续生成新粒子而老粒子的active标志位没有被检测或检测了但没有复用导致每一帧要更新的粒子数无限膨胀。这个问题的隐蔽之处在于前20秒看不出卡因为粒子量还在几百发到第20发以后可能就积到几千个移动端直接卡成PPT。解决在粒子生成入口和更新循环里各加一道检查。生成时判断当前存活粒子数是否已到maxActiveParticles到了就先全局回收最老的一批更新循环里每帧过滤active为false的粒子不进入后续绘制逻辑。最简单粗暴的兜底写法是在update里加上一句if (activeCount max) { particles[0].active false; }虽然不优雅但能立刻止住内存膨胀。5.4 手机浏览器上画面模糊弧线边缘发虚原因没有适配devicePixelRatiocanvas的实际分辨率小于CSS显示尺寸。桌面端DPR接近1问题不明显手机DPR是2到3canvas内容被强行放大后糊得厉害。如果你发现手机上看烟花边缘有一圈锯齿基本就是这个原因。解决按第4.3节的DPR方案处理在初始化时把canvas.width设为clientWidth乘dpr再用ctx.scale(dpr, dpr)。注意要在设置canvas尺寸之后再获取ctx顺序反了会导致scale作用在旧的坐标系上前面画的东西仍然模糊。改完之后用手机浏览器实际访问一次放大画面看粒子边缘是否锐利。5.5 月亮图层消失了换个浏览器又出现原因moon.png的定位元素可能被canvas盖住或者浏览器对canvas默认样式处理不同。canvas有时会自动带上内联尺寸属性导致显示层叠顺序不稳定还有可能是因为img元素没有显式设置z-index而canvas的z-index在某种渲染模式下默认更高。解决给canvas和月亮分别设置z-index保证canvas是2、月亮是3且两者的position都要设置为relative或absolute。如果条件允许把moon.png的绘制也直接搬到canvas里在粒子绘制之前drawImage上去这样图层关系由代码完全掌控不同浏览器的表现会统一。6. 把烟花升级成可交互的点击发射、参数联动与验证清单6.1 监听canvas点击事件把这份静态烟花变成可交互的只需要在canvas上挂一个click监听。坐标要转换因为canvas在页面上可能有偏移。常见做法是使用getBoundingClientRect计算点击位置相对canvas左上角的坐标再把这个坐标作为烟花发射的x和y。发射后保持原有物理规则不变用户点的位置就是爆炸中心。canvas.addEventListener(click, (e) { const rect canvas.getBoundingClientRect(); const startX e.clientX - rect.left; const startY e.clientY - rect.top; launchFirework(startX, startY); });逻辑说明launchFirework内部创建炮弹粒子给一个向上的初速度并把这颗炮弹的爆炸高度定为点击点的y坐标。这样用户点屏幕哪里烟花就在哪里绽开交互感直观。如果你希望点击后烟花从底部升起再在点击位置炸开就把点击点的y值当作“爆炸目标高度”而不是发射起点。参数说明如果想限制点击发射的频率可以在launchFirework里加一个时间戳判断例如两次发射间隔不得小于200毫秒。否则用户快速连点时瞬间爆出大量粒子前面设置好的粒子池上限也会被顶穿。6.2 做一个最小可用的调参面板如果不想引入外部库直接在index.html底部追加几个range类型的input就能完成参数联动。每次用户调整滑块把CONFIG里的对应字段改掉下一发烟花立即生效。实践里的做法是把滑块的值直接绑定到CONFIG对象上。6.3 调参后的效果验证清单参数推荐区间设置后观察点gravity0.05-0.15烟花能否升到画面中上部再爆炸drag0.95-0.99火花散开弧线是否自然explosionParticleCount80-200单发烟花密度是否足够maxActiveParticles800-3000连续10发后帧率是否稳定半透明黑alpha0.15-0.35拖尾是长尾还是点状这套源码的边界很清楚它是基于2D canvas的粒子特效不是3D渲染也没有音频引擎但作为活动页背景、晚会开场倒计时、个人页面点缀已经完全够用。如果你要的是“非常逼真的三维光影烟花”那得换WebGL方案这份资源做不到也不该被要求做到——但它相当适合用来理解粒子系统的基本运转逻辑。那次给模拟项目X调年会背景我图省事直接把gravity拉到0.5结果全场烟花都在屏幕底部炸开观感像一群地面火炮之后被迫花了半小时把参数一个个往回捋。从那以后我每次调粒子系统都会强制先看三个值重力系数、粒子池上限、DPR适配确认这三者没问题再碰颜色和拖尾。希望这篇拆解帮到你——把这套源码跑起来、拆开看明白你就已经摸到粒子系统从“能跑”到“好看”之间最重要的那段路。本文还有配套的精品资源点击获取