拓冰网站定制 
简介这是一份面向前端开发者与图形学初学者的轻量级仿真烟花特效源码聚焦粒子系统原理实践帮助读者快速掌握逼真动态特效的实现逻辑。资源包含4个核心文件3张PNG素材城市夜景背景、月亮、使用说明图与1个可直接运行的HTML主页面整体仅321KB解压即用适合嵌入网页项目或教学演示。目前已有814人学习下载体现了其在入门级视觉特效开发中的实用热度。读者可完整获得基于物理模拟的烟花升空、爆炸、衰减全过程代码涵盖粒子运动轨迹、重力与颜色渐变控制、纹理映射及基础交互触发逻辑HTML文件已内联全部逻辑无需额外依赖便于逐行调试理解粒子生命周期管理与性能优化思路。1. 为什么“仿真烟花”不是炫技玩具而是图形编程能力的试金石你点开一个“精品源码 / 炫酷特效 / 仿真烟花”的压缩包第一眼看到的可能是满屏炸裂的光点、拖尾、渐变、粒子爆炸——但真正决定它能不能落地、能不能改、能不能嵌入项目里的根本不是视觉冲击力而是背后那套物理建模精度 × 渲染管线控制 × 时间步进稳定性的三角平衡。我见过太多人把这类源码当GIF贴图用双击运行能看想改个颜色就报错想加个点击触发就卡顿掉帧想迁移到WebGL或移动端直接崩溃。问题不在“炫酷”而在“仿真”二字——它要求你理解粒子生命周期、受力衰减、碰撞反馈、屏幕空间坐标变换甚至要考虑GPU内存带宽对万级粒子的吞吐压力。这不是调几个RGB值就能搞定的动效而是图形学、数值计算和实时渲染的交叉现场。适合两类人一是想从CSS动画/JS简单canvas跳出来真正吃透前端图形底层逻辑的开发者二是需要在工业仿真、教育演示、数字展厅中嵌入可控、可交互、可复现物理行为的视觉模块的工程师。别被“精品源码”四个字骗了——源码只是结果仿真逻辑才是你要逆向拆解的黑匣子。2. 从零跑通一个可调试的烟花仿真最小可执行闭环要验证一个“仿真烟花”源码是否真能为你所用不能只看demo视频必须亲手构建一个可打断、可单步、可改参、可测帧率的最小闭环。我一般不直接跑作者给的main.html而是先剥离UI层用最原始的Canvas 2D API搭起骨架再逐步注入物理模型。这样哪怕后续换Three.js或WebGL核心逻辑也能平移。2.1 创建带时间戳驱动的Canvas画布容器!DOCTYPE html html head meta charsetutf-8 title烟花仿真最小闭环/title style body { margin: 0; overflow: hidden; background: #000; } canvas { display: block; } /style /head body canvas idfireworkCanvas/canvas script const canvas document.getElementById(fireworkCanvas); const ctx canvas.getContext(2d); // 动态适配设备像素比避免模糊 const dpr window.devicePixelRatio || 1; canvas.width window.innerWidth * dpr; canvas.height window.innerHeight * dpr; ctx.scale(dpr, dpr); // 帧率监控关键仿真必须知道当前dt let lastTime 0; let frameCount 0; let fps 60; function animate(timestamp) { const deltaTime timestamp - lastTime; lastTime timestamp; frameCount; if (frameCount % 60 0) { fps Math.round(1000 / (timestamp - lastTime 1)); // 防除零 lastTime timestamp; } // 清屏注意用clearRect而非fillRect避免重绘整个背景 ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); // 核心仿真更新与绘制入口留空待填 updateAndRender(deltaTime); requestAnimationFrame(animate); } // 启动 requestAnimationFrame(animate); /script /body /html逻辑说明这段代码不是“让烟花动起来”而是建立一个可控的时间基座。deltaTime是后续所有物理计算的基石——速度×dt位移加速度×dt速度增量。没有它“仿真”就退化成固定帧率的逐帧动画一卡全卡无法适配不同性能设备。dpr适配防止高清屏下粒子糊成一片这是很多开源烟花源码翻车的第一步作者本地跑得飞起用户手机上全是马赛克光斑。2.2 实现一个可配置的烟花发射器类含基础物理class FireworkLauncher { constructor(x, y) { this.x x; this.y y; this.particles []; this.isExploded false; this.explodeHeight 300; // 单位px决定何时引爆 this.gravity 0.2; // 模拟重力加速度非真实g按像素/帧缩放 } launch() { // 发射初速度向上为主带微小随机偏移 this.velocityY -8 - Math.random() * 4; this.velocityX (Math.random() - 0.5) * 2; } update(deltaTime) { if (this.isExploded) return; // 竖直方向匀减速上升 → 自由落体 this.velocityY this.gravity * deltaTime * 0.016; // 0.016 ≈ 1/60归一化到60fps基准 this.y this.velocityY * deltaTime * 0.016; this.x this.velocityX * deltaTime * 0.016; // 到达预设高度时爆炸 if (this.y this.explodeHeight this.velocityY 0) { this.explode(); } } explode() { this.isExploded true; const particleCount 150 Math.floor(Math.random() * 50); for (let i 0; i particleCount; i) { const angle Math.random() * Math.PI * 2; const speed 2 Math.random() * 4; this.particles.push({ x: this.x, y: this.y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, life: 100 Math.random() * 100, // 生命周期帧数 maxLife: 100 Math.random() * 100, color: hsl(${Math.random() * 60 10}, 100%, 60%), // 橙黄系主色 size: 1 Math.random() * 2 }); } } render(ctx) { if (!this.isExploded) { // 未爆前画一个上升的小圆点引信 ctx.beginPath(); ctx.arc(this.x, this.y, 2, 0, Math.PI * 2); ctx.fillStyle #fff; ctx.fill(); } else { // 爆炸后遍历粒子 for (let i 0; i this.particles.length; i) { const p this.particles[i]; p.life--; if (p.life 0) continue; // 物理持续受重力影响 p.vy this.gravity * 0.016; p.x p.vx * 0.016; p.y p.vy * 0.016; // 衰减大小随生命减少透明度渐隐 const alpha p.life / p.maxLife; const size p.size * alpha; ctx.beginPath(); ctx.arc(p.x, p.y, size, 0, Math.PI * 2); ctx.fillStyle p.color.replace(), , ${alpha})).replace(hsl, hsla); ctx.fill(); } } } } // 全局管理器简化版 const launchers []; function addFirework(x, y) { const fw new FireworkLauncher(x, y); fw.launch(); launchers.push(fw); } // 绑定鼠标点击触发 canvas.addEventListener(click, (e) { const rect canvas.getBoundingClientRect(); const x e.clientX - rect.left; const y e.clientY - rect.top; addFirework(x, y); }); // 主循环调用 function updateAndRender(deltaTime) { // 更新所有发射器 for (let i 0; i launchers.length; i) { launchers[i].update(deltaTime); } // 渲染所有发射器 for (let i 0; i launchers.length; i) { launchers[i].render(ctx); } }参数说明gravity不是9.8而是0.2——这是经验缩放值。真实物理单位在像素坐标系里会飞出屏幕必须按视觉节奏压缩。值太小粒子飘太久太大则炸完立刻砸地失去“升空-爆破-散落”三段感。deltaTime * 0.016将毫秒级时间差映射到60fps基准1000ms/60≈16.67ms。这是跨设备帧率稳定的锚点否则高刷屏上粒子飞太快低配机上慢如幻灯片。hsla颜色渐变用alpha直接控制透明度比ctx.globalAlpha更精准——后者会影响整个绘制状态而粒子需各自独立衰减。life/maxLife不用Date.now()或绝对时间纯帧计数。避免因卡顿导致粒子“瞬移”或“复活”。这个类已具备完整仿真链路发射→上升→引爆→粒子扩散→受重力下落→透明度衰减→自动回收。它不依赖任何第三方库所有物理都在CPU端完成便于调试和修改。下一步就是把它升级为可批量调度、支持多种弹道、带音效同步的生产级模块。3. 让烟花“像真的一样”三个必须调优的物理参数组仿真烟花的“炫酷”来自视觉但“可信”来自物理参数的真实感。很多人以为调颜色、加拖尾就完事其实真正让观众觉得“这玩意儿有质量、有惯性、有空气阻力”的是以下三组参数的协同——它们彼此耦合改一个就得调另外两个否则立刻露馅。3.1 弹道参数组升空阶段的可信度基石参数典型值作用过调后果调试技巧initialVelocityY初速Y-8 ~ -12决定升空高度和时间太小没升空就炸太大飞出屏幕顶部用console.log打印每次y坐标观察是否在200~400px区间稳定引爆gravity重力系数0.15 ~ 0.25控制上升减速和下落加速度太小粒子悬浮不落太大炸完立刻砸地无飘散感固定初速后调gravity使粒子从最高点落到地面耗时≈1.5秒肉眼感知airResistance空气阻力可选0.98 ~ 0.995每帧乘数模拟速度衰减让轨迹更柔和不加粒子运动生硬如弹球过强升空无力爆炸软塌塌在update中加入p.vx * airResistance; p.vy * airResistance;优先加在爆炸后粒子上血泪经验别迷信“真实g9.8”。Canvas坐标系里1px1m荒谬。我的做法是先固定initialVelocityY -10然后调gravity直到肉眼看到“升空-悬停-缓降”三段节奏再微调airResistance让横向扩散粒子边缘不发散过快——就像真实烟花中心亮、边缘淡、整体呈球状膨胀而非直线喷射。3.2 爆炸参数组决定“那一瞬间”的戏剧张力参数典型值作用过调后果调试技巧particleCount粒子数120 ~ 200影响爆炸饱满度100稀疏如散弹250GPU吃紧低端机掉帧在Chrome DevTools Performance面板录一段看GPU占用是否持续70%explosionSpeed初速3 ~ 6px/frame控制爆炸冲击力太小像慢动作太大粒子瞬间飞出视野用requestAnimationFrame打点在爆炸帧记录粒子最大位移目标1秒内覆盖半屏宽度sizeDecayRate尺寸衰减0.97 ~ 0.99每帧乘数模拟光强随距离衰减不衰减粒子全程等大像贴图过快炸完即消失观察粒子群中心粒子应保持较大尺寸10~15帧边缘粒子快速缩小玄学提示真实烟花爆炸不是所有粒子同时诞生。我在explode()里加了个小偏移// 原始for (let i 0; i particleCount; i) { ... } // 改为 for (let i 0; i particleCount; i) { setTimeout(() { // 插入粒子带50ms内随机延迟 this.particles.push({ /* ... */ }); }, Math.random() * 50); }效果立竿见影爆炸不再是“啪”一声整块亮起而是有层次的“噗—嘶—哗”更接近火药分层引爆的真实感。3.3 渲染参数组把物理数据翻译成视网膜级体验参数典型值作用过调后果调试技巧particleSize基础尺寸1.2 ~ 2.5px决定粒子基础存在感1糊成点3像马赛克块在1080p屏上用devicePixelRatio2时1px粒子实际占2×2物理像素务必实测blurRadius高斯模糊0.5 ~ 1.2CSS filter或shadowBlur模拟光晕和运动残影不加机械感强1.5整体发虚失去锐利爆炸感Canvas用ctx.shadowBlurWebGL用fragment shader加高斯权重二者效果不可互换colorPalette色相范围hsl(10,100%,60%)→hsl(40,100%,60%)控制暖色系主调模拟燃烧温度跨度过大如0→120像调色盘过窄10→15单调乏味真实烟花金属盐配方决定色相锶盐红、钡盐绿、铜盐蓝——按此选3组主色而非随机HSL避坑提醒别用ctx.globalCompositeOperation lighter做叠加发光——它会让粒子交叠处过曝成白点失去层次。正确做法是每个粒子用hsla控制自身alpha靠密度自然形成亮区这才是光学叠加的本质。4. 仿真烟花开发中的五大经典翻车现场与硬核解法写过3个以上烟花项目的工程师都懂90%的调试时间花在“为什么这里不对劲”。不是算法错而是某些细节在视觉暂留下被忽略却在逻辑链里引发雪崩。以下是我在真实项目中踩过的坑附带定位方法和一行修复代码。4.1 现象烟花在高刷屏120Hz上炸成一条直线毫无扩散感原因deltaTime未归一化直接用于速度累加。120Hz下deltaTime≈8ms60Hz下≈16ms同一gravity值在高刷屏上加速度翻倍粒子瞬间飞散。解决所有物理计算必须基于基准帧率通常60fps做时间缩放。// 错误写法常见于开源代码 this.vy this.gravity * deltaTime; // 正确写法强制锚定60fps const baseFps 60; const timeScale deltaTime / (1000 / baseFps); // 归一化因子 this.vy this.gravity * timeScale;4.2 现象连续点击发射第5发开始明显卡顿FPS从60掉到30原因粒子对象未及时回收particles数组无限增长GC压力暴增。尤其Array.push()在V8引擎中超过10万对象时内存分配开销剧增。解决实现粒子池Object Pool复用对象而非新建。class ParticlePool { constructor(maxSize 5000) { this.pool []; this.maxSize maxSize; } get() { return this.pool.length ? this.pool.pop() : {}; } put(particle) { if (this.pool.length this.maxSize) { this.pool.push(particle); } } } // 使用const p particlePool.get(); ... 粒子life0时 particlePool.put(p);4.3 现象移动端Safari上烟花颜色全变成灰色且拖尾消失原因Safari对hsla()支持不一致且shadowBlur在iOS WebKit中默认关闭硬件加速导致性能断崖。解决降级方案强制开启硬件加速。/* CSS中 */ .firework-canvas { transform: translateZ(0); /* 强制GPU加速 */ image-rendering: -webkit-optimize-contrast; }// JS中避免hsla改用rgba十六进制 // 错误hsla(${hue}, 100%, 60%, ${alpha}) // 正确rgba(${r}, ${g}, ${b}, ${alpha})r/g/b查表转换如橙色255,165,04.4 现象烟花爆炸后部分粒子“穿墙”——越过canvas边界继续运动原因clearRect()只清画布不重置粒子坐标。粒子x/y超出边界后仍参与计算下次ctx.arc()时坐标溢出浏览器静默丢弃绘制。解决在update()中主动截断越界粒子。// 在粒子update循环内 if (p.x -100 || p.x canvas.width 100 || p.y -100 || p.y canvas.height 100) { p.life 0; // 强制死亡避免无效计算 }4.5 现象添加音效后烟花爆炸时刻与声音不同步总是晚200ms原因AudioContext启动需用户手势激活且play()是异步操作currentTime获取不准。解决用audioContext.currentTime校准而非Date.now()。// 正确同步方式 const audioContext new (window.AudioContext || window.webkitAudioContext)(); function playExplosionSound() { const oscillator audioContext.createOscillator(); const gainNode audioContext.createGain(); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); // 关键用audioContext.currentTime作为基准 const now audioContext.currentTime; oscillator.start(now); oscillator.stop(now 0.3); // 0.3秒爆炸音 // 粒子爆炸逻辑在此刻触发而非setTimeout this.explodeAtTime now; }注意这些坑不会报错只会让你的“精品源码”在特定设备/场景下变成“玄学失效”。调试时务必打开DevTools的Rendering面板勾选“FPS Meter”和“Paint Flashing”亲眼看到哪一帧在掉帧、哪一块在重复绘制。5. 把“仿真烟花”变成可交付模块封装、压测与跨平台移植实战当你已经能手写一个稳定60fps、参数可调、物理可信的烟花系统下一步不是“换皮肤”而是把它变成团队里谁都能用、测试能过、上线不翻车的可交付模块。这一步决定你写的到底是玩具还是工程资产。5.1 封装为ES Module支持Tree Shaking与按需加载我拒绝把烟花逻辑塞进一个巨型fireworks.js里。现代前端必须模块化尤其是这种计算密集型功能。核心拆分为三层src/ ├── core/ # 物理引擎纯计算无DOM │ ├── particle.js # 粒子基类含update逻辑 │ ├── launcher.js # 发射器含弹道模型 │ └── physics.js # 重力/阻力/碰撞工具函数 ├── renderer/ # 渲染适配层解耦Canvas/WebGL │ ├── canvas2d.js # Canvas 2D渲染器 │ └── webgl.js # Three.js兼容接口预留 └── index.js # 默认导出自动选择rendererindex.js内容精简到10行import { FireworkLauncher } from ./core/launcher.js; import { CanvasRenderer } from ./renderer/canvas2d.js; export class Fireworks { constructor(options {}) { this.renderer new CanvasRenderer(options.canvas || document.querySelector(canvas)); this.launchers []; } launch(x, y) { const launcher new FireworkLauncher(x, y); launcher.launch(); this.launchers.push(launcher); } tick(deltaTime) { this.launchers.forEach(l l.update(deltaTime)); this.renderer.render(this.launchers); } } // 导出核心类供高级定制 export { FireworkLauncher, CanvasRenderer };为什么重要这样封装后业务方只需3行代码接入import { Fireworks } from fireworks-sim; const fw new Fireworks({ canvas: myCanvas }); canvas.addEventListener(click, e fw.launch(e.x, e.y)); // 在requestAnimationFrame中调用fw.tick(deltaTime)而想深度定制的工程师可直接import { particle } from fireworks-sim/core/particle替换自己的物理模型——这才是“精品源码”的正确打开方式。5.2 压测用真实数据验证性能红线“能跑”不等于“能用”。我坚持用以下三组数据压测每个新版本测试场景目标指标工具/方法不达标处理单发极限1发烟花含200粒子持续爆炸1.5秒FPS≥55Chrome Performance录制60秒分析rAF间隔降低particleCount或启用粒子池并发压力同时存在50发未销毁烟花含升空爆炸中FPS≥45用setInterval(() fw.launch(100,100), 100)连发50次开启cullOutsideView剔除视野外粒子内存泄漏连续发射/销毁1000次内存增长≤5MBChrome Memory面板Heap Snapshot对比检查addEventListener未解绑、setTimeout未清除实操技巧在FireworkLauncher中加一个debug模式if (options.debug) { console.log([FW] Launched at (${x},${y}), particles: ${this.particles.length}); this._debugId Math.random().toString(36).substr(2, 9); }这样压测时能快速定位是哪个发射器在吃内存——比盲猜高效十倍。5.3 跨平台移植从Canvas到Three.js的最小改造路径客户突然说“要放到Three.js场景里”别重写。我的迁移路径只有3步替换渲染器不碰物理逻辑只重写render()方法// threejs-renderer.js export class ThreeJSRenderer { constructor(scene, camera) { this.scene scene; this.camera camera; this.particles new THREE.Group(); scene.add(this.particles); } render(launchers) { // 清空旧粒子 this.particles.clear(); // 遍历所有launcher.particles创建THREE.Sprite launchers.forEach(launcher { launcher.particles.forEach(p { if (p.life 0) { const sprite new THREE.Sprite( new THREE.SpriteMaterial({ color: new THREE.Color(p.color), transparent: true, opacity: p.life / p.maxLife }) ); sprite.position.set(p.x, p.y, 0); sprite.scale.set(p.size, p.size, 1); this.particles.add(sprite); } }); }); } }坐标系对齐Canvas是左上原点Three.js是中心原点// 在ThreeJSRenderer.render中 const canvasRect canvas.getBoundingClientRect(); const x p.x - canvasRect.width / 2; const y -(p.y - canvasRect.height / 2); // Y轴翻转 sprite.position.set(x, y, 0);性能加固用BufferGeometry替代Sprite万级粒子必选// 用instanced mesh1个draw call渲染全部粒子 const geometry new THREE.InstancedBufferGeometry().copy( /* 一个粒子几何体 */ ); const matrix new THREE.Matrix4(); const mesh new THREE.InstancedMesh(geometry, material, maxParticles); // updateMatrixAt(i, matrix) 设置每个粒子位置/缩放/旋转教训我曾花两天把Canvas版迁到WebGL结果发现客户只要“在Three.js里显示”根本不需要WebGL粒子物理——他们已有成熟物理引擎。最后只用了THREE.Sprite方案3小时搞定。所以移植前先问清楚是要复用物理还是只要视觉效果前者重逻辑后者重渲染。希望帮到你。本文还有配套的精品资源点击获取 仿真烟花开发：物理建模、时间步进与跨平台渲染实战
简介这是一份面向前端开发者与图形学初学者的轻量级仿真烟花特效源码聚焦粒子系统原理实践帮助读者快速掌握逼真动态特效的实现逻辑。资源包含4个核心文件3张PNG素材城市夜景背景、月亮、使用说明图与1个可直接运行的HTML主页面整体仅321KB解压即用适合嵌入网页项目或教学演示。目前已有814人学习下载体现了其在入门级视觉特效开发中的实用热度。读者可完整获得基于物理模拟的烟花升空、爆炸、衰减全过程代码涵盖粒子运动轨迹、重力与颜色渐变控制、纹理映射及基础交互触发逻辑HTML文件已内联全部逻辑无需额外依赖便于逐行调试理解粒子生命周期管理与性能优化思路。1. 为什么“仿真烟花”不是炫技玩具而是图形编程能力的试金石你点开一个“精品源码 / 炫酷特效 / 仿真烟花”的压缩包第一眼看到的可能是满屏炸裂的光点、拖尾、渐变、粒子爆炸——但真正决定它能不能落地、能不能改、能不能嵌入项目里的根本不是视觉冲击力而是背后那套物理建模精度 × 渲染管线控制 × 时间步进稳定性的三角平衡。我见过太多人把这类源码当GIF贴图用双击运行能看想改个颜色就报错想加个点击触发就卡顿掉帧想迁移到WebGL或移动端直接崩溃。问题不在“炫酷”而在“仿真”二字——它要求你理解粒子生命周期、受力衰减、碰撞反馈、屏幕空间坐标变换甚至要考虑GPU内存带宽对万级粒子的吞吐压力。这不是调几个RGB值就能搞定的动效而是图形学、数值计算和实时渲染的交叉现场。适合两类人一是想从CSS动画/JS简单canvas跳出来真正吃透前端图形底层逻辑的开发者二是需要在工业仿真、教育演示、数字展厅中嵌入可控、可交互、可复现物理行为的视觉模块的工程师。别被“精品源码”四个字骗了——源码只是结果仿真逻辑才是你要逆向拆解的黑匣子。2. 从零跑通一个可调试的烟花仿真最小可执行闭环要验证一个“仿真烟花”源码是否真能为你所用不能只看demo视频必须亲手构建一个可打断、可单步、可改参、可测帧率的最小闭环。我一般不直接跑作者给的main.html而是先剥离UI层用最原始的Canvas 2D API搭起骨架再逐步注入物理模型。这样哪怕后续换Three.js或WebGL核心逻辑也能平移。2.1 创建带时间戳驱动的Canvas画布容器!DOCTYPE html html head meta charsetutf-8 title烟花仿真最小闭环/title style body { margin: 0; overflow: hidden; background: #000; } canvas { display: block; } /style /head body canvas idfireworkCanvas/canvas script const canvas document.getElementById(fireworkCanvas); const ctx canvas.getContext(2d); // 动态适配设备像素比避免模糊 const dpr window.devicePixelRatio || 1; canvas.width window.innerWidth * dpr; canvas.height window.innerHeight * dpr; ctx.scale(dpr, dpr); // 帧率监控关键仿真必须知道当前dt let lastTime 0; let frameCount 0; let fps 60; function animate(timestamp) { const deltaTime timestamp - lastTime; lastTime timestamp; frameCount; if (frameCount % 60 0) { fps Math.round(1000 / (timestamp - lastTime 1)); // 防除零 lastTime timestamp; } // 清屏注意用clearRect而非fillRect避免重绘整个背景 ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); // 核心仿真更新与绘制入口留空待填 updateAndRender(deltaTime); requestAnimationFrame(animate); } // 启动 requestAnimationFrame(animate); /script /body /html逻辑说明这段代码不是“让烟花动起来”而是建立一个可控的时间基座。deltaTime是后续所有物理计算的基石——速度×dt位移加速度×dt速度增量。没有它“仿真”就退化成固定帧率的逐帧动画一卡全卡无法适配不同性能设备。dpr适配防止高清屏下粒子糊成一片这是很多开源烟花源码翻车的第一步作者本地跑得飞起用户手机上全是马赛克光斑。2.2 实现一个可配置的烟花发射器类含基础物理class FireworkLauncher { constructor(x, y) { this.x x; this.y y; this.particles []; this.isExploded false; this.explodeHeight 300; // 单位px决定何时引爆 this.gravity 0.2; // 模拟重力加速度非真实g按像素/帧缩放 } launch() { // 发射初速度向上为主带微小随机偏移 this.velocityY -8 - Math.random() * 4; this.velocityX (Math.random() - 0.5) * 2; } update(deltaTime) { if (this.isExploded) return; // 竖直方向匀减速上升 → 自由落体 this.velocityY this.gravity * deltaTime * 0.016; // 0.016 ≈ 1/60归一化到60fps基准 this.y this.velocityY * deltaTime * 0.016; this.x this.velocityX * deltaTime * 0.016; // 到达预设高度时爆炸 if (this.y this.explodeHeight this.velocityY 0) { this.explode(); } } explode() { this.isExploded true; const particleCount 150 Math.floor(Math.random() * 50); for (let i 0; i particleCount; i) { const angle Math.random() * Math.PI * 2; const speed 2 Math.random() * 4; this.particles.push({ x: this.x, y: this.y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, life: 100 Math.random() * 100, // 生命周期帧数 maxLife: 100 Math.random() * 100, color: hsl(${Math.random() * 60 10}, 100%, 60%), // 橙黄系主色 size: 1 Math.random() * 2 }); } } render(ctx) { if (!this.isExploded) { // 未爆前画一个上升的小圆点引信 ctx.beginPath(); ctx.arc(this.x, this.y, 2, 0, Math.PI * 2); ctx.fillStyle #fff; ctx.fill(); } else { // 爆炸后遍历粒子 for (let i 0; i this.particles.length; i) { const p this.particles[i]; p.life--; if (p.life 0) continue; // 物理持续受重力影响 p.vy this.gravity * 0.016; p.x p.vx * 0.016; p.y p.vy * 0.016; // 衰减大小随生命减少透明度渐隐 const alpha p.life / p.maxLife; const size p.size * alpha; ctx.beginPath(); ctx.arc(p.x, p.y, size, 0, Math.PI * 2); ctx.fillStyle p.color.replace(), , ${alpha})).replace(hsl, hsla); ctx.fill(); } } } } // 全局管理器简化版 const launchers []; function addFirework(x, y) { const fw new FireworkLauncher(x, y); fw.launch(); launchers.push(fw); } // 绑定鼠标点击触发 canvas.addEventListener(click, (e) { const rect canvas.getBoundingClientRect(); const x e.clientX - rect.left; const y e.clientY - rect.top; addFirework(x, y); }); // 主循环调用 function updateAndRender(deltaTime) { // 更新所有发射器 for (let i 0; i launchers.length; i) { launchers[i].update(deltaTime); } // 渲染所有发射器 for (let i 0; i launchers.length; i) { launchers[i].render(ctx); } }参数说明gravity不是9.8而是0.2——这是经验缩放值。真实物理单位在像素坐标系里会飞出屏幕必须按视觉节奏压缩。值太小粒子飘太久太大则炸完立刻砸地失去“升空-爆破-散落”三段感。deltaTime * 0.016将毫秒级时间差映射到60fps基准1000ms/60≈16.67ms。这是跨设备帧率稳定的锚点否则高刷屏上粒子飞太快低配机上慢如幻灯片。hsla颜色渐变用alpha直接控制透明度比ctx.globalAlpha更精准——后者会影响整个绘制状态而粒子需各自独立衰减。life/maxLife不用Date.now()或绝对时间纯帧计数。避免因卡顿导致粒子“瞬移”或“复活”。这个类已具备完整仿真链路发射→上升→引爆→粒子扩散→受重力下落→透明度衰减→自动回收。它不依赖任何第三方库所有物理都在CPU端完成便于调试和修改。下一步就是把它升级为可批量调度、支持多种弹道、带音效同步的生产级模块。3. 让烟花“像真的一样”三个必须调优的物理参数组仿真烟花的“炫酷”来自视觉但“可信”来自物理参数的真实感。很多人以为调颜色、加拖尾就完事其实真正让观众觉得“这玩意儿有质量、有惯性、有空气阻力”的是以下三组参数的协同——它们彼此耦合改一个就得调另外两个否则立刻露馅。3.1 弹道参数组升空阶段的可信度基石参数典型值作用过调后果调试技巧initialVelocityY初速Y-8 ~ -12决定升空高度和时间太小没升空就炸太大飞出屏幕顶部用console.log打印每次y坐标观察是否在200~400px区间稳定引爆gravity重力系数0.15 ~ 0.25控制上升减速和下落加速度太小粒子悬浮不落太大炸完立刻砸地无飘散感固定初速后调gravity使粒子从最高点落到地面耗时≈1.5秒肉眼感知airResistance空气阻力可选0.98 ~ 0.995每帧乘数模拟速度衰减让轨迹更柔和不加粒子运动生硬如弹球过强升空无力爆炸软塌塌在update中加入p.vx * airResistance; p.vy * airResistance;优先加在爆炸后粒子上血泪经验别迷信“真实g9.8”。Canvas坐标系里1px1m荒谬。我的做法是先固定initialVelocityY -10然后调gravity直到肉眼看到“升空-悬停-缓降”三段节奏再微调airResistance让横向扩散粒子边缘不发散过快——就像真实烟花中心亮、边缘淡、整体呈球状膨胀而非直线喷射。3.2 爆炸参数组决定“那一瞬间”的戏剧张力参数典型值作用过调后果调试技巧particleCount粒子数120 ~ 200影响爆炸饱满度100稀疏如散弹250GPU吃紧低端机掉帧在Chrome DevTools Performance面板录一段看GPU占用是否持续70%explosionSpeed初速3 ~ 6px/frame控制爆炸冲击力太小像慢动作太大粒子瞬间飞出视野用requestAnimationFrame打点在爆炸帧记录粒子最大位移目标1秒内覆盖半屏宽度sizeDecayRate尺寸衰减0.97 ~ 0.99每帧乘数模拟光强随距离衰减不衰减粒子全程等大像贴图过快炸完即消失观察粒子群中心粒子应保持较大尺寸10~15帧边缘粒子快速缩小玄学提示真实烟花爆炸不是所有粒子同时诞生。我在explode()里加了个小偏移// 原始for (let i 0; i particleCount; i) { ... } // 改为 for (let i 0; i particleCount; i) { setTimeout(() { // 插入粒子带50ms内随机延迟 this.particles.push({ /* ... */ }); }, Math.random() * 50); }效果立竿见影爆炸不再是“啪”一声整块亮起而是有层次的“噗—嘶—哗”更接近火药分层引爆的真实感。3.3 渲染参数组把物理数据翻译成视网膜级体验参数典型值作用过调后果调试技巧particleSize基础尺寸1.2 ~ 2.5px决定粒子基础存在感1糊成点3像马赛克块在1080p屏上用devicePixelRatio2时1px粒子实际占2×2物理像素务必实测blurRadius高斯模糊0.5 ~ 1.2CSS filter或shadowBlur模拟光晕和运动残影不加机械感强1.5整体发虚失去锐利爆炸感Canvas用ctx.shadowBlurWebGL用fragment shader加高斯权重二者效果不可互换colorPalette色相范围hsl(10,100%,60%)→hsl(40,100%,60%)控制暖色系主调模拟燃烧温度跨度过大如0→120像调色盘过窄10→15单调乏味真实烟花金属盐配方决定色相锶盐红、钡盐绿、铜盐蓝——按此选3组主色而非随机HSL避坑提醒别用ctx.globalCompositeOperation lighter做叠加发光——它会让粒子交叠处过曝成白点失去层次。正确做法是每个粒子用hsla控制自身alpha靠密度自然形成亮区这才是光学叠加的本质。4. 仿真烟花开发中的五大经典翻车现场与硬核解法写过3个以上烟花项目的工程师都懂90%的调试时间花在“为什么这里不对劲”。不是算法错而是某些细节在视觉暂留下被忽略却在逻辑链里引发雪崩。以下是我在真实项目中踩过的坑附带定位方法和一行修复代码。4.1 现象烟花在高刷屏120Hz上炸成一条直线毫无扩散感原因deltaTime未归一化直接用于速度累加。120Hz下deltaTime≈8ms60Hz下≈16ms同一gravity值在高刷屏上加速度翻倍粒子瞬间飞散。解决所有物理计算必须基于基准帧率通常60fps做时间缩放。// 错误写法常见于开源代码 this.vy this.gravity * deltaTime; // 正确写法强制锚定60fps const baseFps 60; const timeScale deltaTime / (1000 / baseFps); // 归一化因子 this.vy this.gravity * timeScale;4.2 现象连续点击发射第5发开始明显卡顿FPS从60掉到30原因粒子对象未及时回收particles数组无限增长GC压力暴增。尤其Array.push()在V8引擎中超过10万对象时内存分配开销剧增。解决实现粒子池Object Pool复用对象而非新建。class ParticlePool { constructor(maxSize 5000) { this.pool []; this.maxSize maxSize; } get() { return this.pool.length ? this.pool.pop() : {}; } put(particle) { if (this.pool.length this.maxSize) { this.pool.push(particle); } } } // 使用const p particlePool.get(); ... 粒子life0时 particlePool.put(p);4.3 现象移动端Safari上烟花颜色全变成灰色且拖尾消失原因Safari对hsla()支持不一致且shadowBlur在iOS WebKit中默认关闭硬件加速导致性能断崖。解决降级方案强制开启硬件加速。/* CSS中 */ .firework-canvas { transform: translateZ(0); /* 强制GPU加速 */ image-rendering: -webkit-optimize-contrast; }// JS中避免hsla改用rgba十六进制 // 错误hsla(${hue}, 100%, 60%, ${alpha}) // 正确rgba(${r}, ${g}, ${b}, ${alpha})r/g/b查表转换如橙色255,165,04.4 现象烟花爆炸后部分粒子“穿墙”——越过canvas边界继续运动原因clearRect()只清画布不重置粒子坐标。粒子x/y超出边界后仍参与计算下次ctx.arc()时坐标溢出浏览器静默丢弃绘制。解决在update()中主动截断越界粒子。// 在粒子update循环内 if (p.x -100 || p.x canvas.width 100 || p.y -100 || p.y canvas.height 100) { p.life 0; // 强制死亡避免无效计算 }4.5 现象添加音效后烟花爆炸时刻与声音不同步总是晚200ms原因AudioContext启动需用户手势激活且play()是异步操作currentTime获取不准。解决用audioContext.currentTime校准而非Date.now()。// 正确同步方式 const audioContext new (window.AudioContext || window.webkitAudioContext)(); function playExplosionSound() { const oscillator audioContext.createOscillator(); const gainNode audioContext.createGain(); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); // 关键用audioContext.currentTime作为基准 const now audioContext.currentTime; oscillator.start(now); oscillator.stop(now 0.3); // 0.3秒爆炸音 // 粒子爆炸逻辑在此刻触发而非setTimeout this.explodeAtTime now; }注意这些坑不会报错只会让你的“精品源码”在特定设备/场景下变成“玄学失效”。调试时务必打开DevTools的Rendering面板勾选“FPS Meter”和“Paint Flashing”亲眼看到哪一帧在掉帧、哪一块在重复绘制。5. 把“仿真烟花”变成可交付模块封装、压测与跨平台移植实战当你已经能手写一个稳定60fps、参数可调、物理可信的烟花系统下一步不是“换皮肤”而是把它变成团队里谁都能用、测试能过、上线不翻车的可交付模块。这一步决定你写的到底是玩具还是工程资产。5.1 封装为ES Module支持Tree Shaking与按需加载我拒绝把烟花逻辑塞进一个巨型fireworks.js里。现代前端必须模块化尤其是这种计算密集型功能。核心拆分为三层src/ ├── core/ # 物理引擎纯计算无DOM │ ├── particle.js # 粒子基类含update逻辑 │ ├── launcher.js # 发射器含弹道模型 │ └── physics.js # 重力/阻力/碰撞工具函数 ├── renderer/ # 渲染适配层解耦Canvas/WebGL │ ├── canvas2d.js # Canvas 2D渲染器 │ └── webgl.js # Three.js兼容接口预留 └── index.js # 默认导出自动选择rendererindex.js内容精简到10行import { FireworkLauncher } from ./core/launcher.js; import { CanvasRenderer } from ./renderer/canvas2d.js; export class Fireworks { constructor(options {}) { this.renderer new CanvasRenderer(options.canvas || document.querySelector(canvas)); this.launchers []; } launch(x, y) { const launcher new FireworkLauncher(x, y); launcher.launch(); this.launchers.push(launcher); } tick(deltaTime) { this.launchers.forEach(l l.update(deltaTime)); this.renderer.render(this.launchers); } } // 导出核心类供高级定制 export { FireworkLauncher, CanvasRenderer };为什么重要这样封装后业务方只需3行代码接入import { Fireworks } from fireworks-sim; const fw new Fireworks({ canvas: myCanvas }); canvas.addEventListener(click, e fw.launch(e.x, e.y)); // 在requestAnimationFrame中调用fw.tick(deltaTime)而想深度定制的工程师可直接import { particle } from fireworks-sim/core/particle替换自己的物理模型——这才是“精品源码”的正确打开方式。5.2 压测用真实数据验证性能红线“能跑”不等于“能用”。我坚持用以下三组数据压测每个新版本测试场景目标指标工具/方法不达标处理单发极限1发烟花含200粒子持续爆炸1.5秒FPS≥55Chrome Performance录制60秒分析rAF间隔降低particleCount或启用粒子池并发压力同时存在50发未销毁烟花含升空爆炸中FPS≥45用setInterval(() fw.launch(100,100), 100)连发50次开启cullOutsideView剔除视野外粒子内存泄漏连续发射/销毁1000次内存增长≤5MBChrome Memory面板Heap Snapshot对比检查addEventListener未解绑、setTimeout未清除实操技巧在FireworkLauncher中加一个debug模式if (options.debug) { console.log([FW] Launched at (${x},${y}), particles: ${this.particles.length}); this._debugId Math.random().toString(36).substr(2, 9); }这样压测时能快速定位是哪个发射器在吃内存——比盲猜高效十倍。5.3 跨平台移植从Canvas到Three.js的最小改造路径客户突然说“要放到Three.js场景里”别重写。我的迁移路径只有3步替换渲染器不碰物理逻辑只重写render()方法// threejs-renderer.js export class ThreeJSRenderer { constructor(scene, camera) { this.scene scene; this.camera camera; this.particles new THREE.Group(); scene.add(this.particles); } render(launchers) { // 清空旧粒子 this.particles.clear(); // 遍历所有launcher.particles创建THREE.Sprite launchers.forEach(launcher { launcher.particles.forEach(p { if (p.life 0) { const sprite new THREE.Sprite( new THREE.SpriteMaterial({ color: new THREE.Color(p.color), transparent: true, opacity: p.life / p.maxLife }) ); sprite.position.set(p.x, p.y, 0); sprite.scale.set(p.size, p.size, 1); this.particles.add(sprite); } }); }); } }坐标系对齐Canvas是左上原点Three.js是中心原点// 在ThreeJSRenderer.render中 const canvasRect canvas.getBoundingClientRect(); const x p.x - canvasRect.width / 2; const y -(p.y - canvasRect.height / 2); // Y轴翻转 sprite.position.set(x, y, 0);性能加固用BufferGeometry替代Sprite万级粒子必选// 用instanced mesh1个draw call渲染全部粒子 const geometry new THREE.InstancedBufferGeometry().copy( /* 一个粒子几何体 */ ); const matrix new THREE.Matrix4(); const mesh new THREE.InstancedMesh(geometry, material, maxParticles); // updateMatrixAt(i, matrix) 设置每个粒子位置/缩放/旋转教训我曾花两天把Canvas版迁到WebGL结果发现客户只要“在Three.js里显示”根本不需要WebGL粒子物理——他们已有成熟物理引擎。最后只用了THREE.Sprite方案3小时搞定。所以移植前先问清楚是要复用物理还是只要视觉效果前者重逻辑后者重渲染。希望帮到你。本文还有配套的精品资源点击获取