H5 Canvas粒子爆炸动画：从零实现到2000粒子性能优化

简介这份资源是面向前端开发者与网页动效爱好者的H5 Canvas粒子爆炸动画特效源码包适合想掌握Canvas绘图与粒子系统、为页面添加炫酷文字背景动画的中级学习者。压缩包共6个文件约59KB包含3个js脚本、1个html与1个htm页面、1个css样式表js负责粒子生成、运动与动画循环逻辑html搭建画布结构css控制整体布局与视觉呈现。资源围绕Canvas 2D上下文、requestAnimationFrame逐帧重绘、粒子生命周期与重力衰减等核心机制展开文字由粒子按轮廓动态聚合与消散形成爆炸式视觉冲击。目前已有321人学习下载读者可借此理解粒子对象的属性设计、批量数组管理与闭包状态保持思路并对照代码掌握从粒子初始化到动画循环的完整实现路径为制作高级前端动态效果积累可复用的实践参考。1. 拆开一个粒子爆炸动画Canvas 里到底在算什么很多人第一次看到 H5 Canvas 粒子爆炸动画特效直觉是「一堆小圆点炸开」但真正动手写才发现难点从来不是画圆点而是让几百上千个粒子在 60 帧里各走各的轨迹、各自衰减、各自受重力影响还要保证不掉帧。这个标题对应的场景非常具体点击或自动触发时从某个坐标点向四周喷射粒子粒子带初速度、受阻尼、逐渐透明消失最终画面归零等待下一次触发。它适合两类人一类是想给按钮、卡片、加载完成加一点即时反馈的前端另一类是刚接触 Canvas 动画、想找一个能跑通又不太复杂的项目练手的人。核心不在特效本身而在于你能否把「粒子系统」这套模型拆成位置、速度、加速度、生命周期四个可调参数并用一个统一的更新循环驱动它们。2. 粒子系统的四个状态量位置、速度、加速度、寿命2.1 为什么不用 CSS 动画或 SVG先讲选型。CSS 动画做单点位移很舒服但粒子爆炸是「一次生成 N 个元素每个元素轨迹不同还要逐帧改透明度」用 CSS 意味着你要么写 N 组 keyframes要么用 JS 逐个改 style前者不现实后者会频繁触发样式重算和重绘几百个粒子就开始卡。SVG 的circle数量一多DOM 节点开销同样压不住。Canvas 的优势在于所有粒子画在同一张位图上浏览器只需要合成一次没有 DOM 树负担。常见做法是单个canvas铺满容器用requestAnimationFrame驱动每帧先清屏再重绘全部粒子。这里有一个容易忽略的点清屏不要用clearRect全画布擦粒子多的时候全擦再全画反而更慢直接fillRect铺一层半透明底色既能清屏又能做出拖尾残影这是粒子特效里很常用的技巧。2.2 四个状态量的物理含义每个粒子在内存里就是一个对象最少要存这些字段// 单个粒子的数据结构 const particle { x: 0, // 当前位置 x y: 0, // 当前位置 y vx: 0, // 水平速度像素/帧 vy: 0, // 垂直速度像素/帧 life: 1, // 剩余寿命1 表示满血0 表示消亡 decay: 0.02, // 每帧寿命衰减量 size: 3, // 绘制半径 color: #ff6b35 };位置每帧加上速度速度每帧加上加速度重力或阻尼寿命每帧减去衰减量寿命小于等于 0 就标记为死亡并从数组里移除。这套模型的好处是参数全部可调改decay控制粒子存活时长改初速度范围控制爆炸半径改vy的增量模拟重力下坠。我一般会把初速度做成极坐标随机角度在 0 到 2π 均匀取速度大小在minSpeed到maxSpeed之间随机这样爆炸形状才是均匀的圆而不是偏向某一侧。2.3 最小可运行版本下面这段代码可以直接存成.html打开点击画布任意位置触发一次爆炸!DOCTYPE html html head meta charsetutf-8 style html, body { margin: 0; height: 100%; background: #111; } canvas { display: block; width: 100%; height: 100%; } /style /head body canvas idcv/canvas script const canvas document.getElementById(cv); const ctx canvas.getContext(2d); let W, H; // 适配高分屏避免粒子发虚 function resize() { const dpr window.devicePixelRatio || 1; W canvas.clientWidth; H canvas.clientHeight; canvas.width W * dpr; canvas.height H * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } window.addEventListener(resize, resize); resize(); const particles []; const GRAVITY 0.08; // 每帧垂直加速度 const DRAG 0.985; // 速度阻尼越接近 1 衰减越慢 function explode(cx, cy, count) { for (let i 0; i count; i) { const angle Math.random() * Math.PI * 2; const speed 2 Math.random() * 6; // 初速度 2~8 particles.push({ x: cx, y: cy, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, life: 1, decay: 0.012 Math.random() * 0.02, size: 1.5 Math.random() * 2.5, color: hsl(${20 Math.random() * 40}, 100%, 60%) }); } } canvas.addEventListener(click, e { const rect canvas.getBoundingClientRect(); explode(e.clientX - rect.left, e.clientY - rect.top, 120); }); function loop() { // 半透明底色清屏形成拖尾 ctx.fillStyle rgba(17, 17, 17, 0.25); ctx.fillRect(0, 0, W, H); for (let i particles.length - 1; i 0; i--) { const p particles[i]; p.vx * DRAG; p.vy p.vy * DRAG GRAVITY; p.x p.vx; p.y p.vy; p.life - p.decay; if (p.life 0) { particles.splice(i, 1); continue; } ctx.globalAlpha p.life; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fillStyle p.color; ctx.fill(); } ctx.globalAlpha 1; requestAnimationFrame(loop); } loop(); /script /body /html逻辑说明resize里用devicePixelRatio放大画布再缩放上下文是为了在 Retina 屏上粒子边缘不发虚这是 Canvas 项目里最常见的翻车点之一。explode用极坐标生成初速度保证方向均匀。主循环里倒序遍历数组因为splice会改变索引正序遍历会漏掉元素。每帧先铺半透明底色粒子移动后留下的浅色残影会让爆炸看起来更「厚」如果不需要拖尾把0.25改成1即可完全清屏。参数说明GRAVITY控制下坠感0 就是无重力向四周飞散DRAG控制速度衰减越小粒子停得越快decay控制寿命越大消失越快count控制单次粒子数120 在普通笔记本上毫无压力超过 800 就要开始关注性能。3. 把粒子数拉到 2000性能边界与渲染优化3.1 什么时候开始掉帧上面那版代码在 120 个粒子时轻松跑满 60 帧但把count改成 2000、连续点击几次粒子总数破万帧率会明显下滑。原因有三个一是每帧对每个粒子调用beginPath和arc路径构建开销随数量线性增长二是globalAlpha和fillStyle频繁切换状态机反复重置三是splice在数组中间删除元素大数组下会触发内存搬移。实测下来普通办公本上单帧 1500 个粒子是舒适区3000 个开始有可感知的卡顿5000 以上基本只能看幻灯片。3.2 用离屏 Canvas 预渲染粒子贴图最有效的优化是别每帧画圆而是提前把粒子画成一张小图之后用drawImage贴上去。drawImage比arc快很多因为它跳过了路径构建和抗锯齿计算。做法是建一个离屏 canvas画一个带径向渐变的圆点主循环里直接贴// 预渲染一张 32x32 的粒子贴图 function makeSprite(color) { const s document.createElement(canvas); s.width s.height 32; const c s.getContext(2d); const g c.createRadialGradient(16, 16, 0, 16, 16, 16); g.addColorStop(0, color); g.addColorStop(1, rgba(255,255,255,0)); c.fillStyle g; c.fillRect(0, 0, 32, 32); return s; } const sprite makeSprite(#ff6b35); // 主循环里替换 arc 绘制 ctx.globalAlpha p.life; ctx.drawImage(sprite, p.x - p.size, p.y - p.size, p.size * 2, p.size * 2);逻辑说明径向渐变从中心实色过渡到透明贴出来就是一个柔和的发光点比纯色圆更好看。drawImage的四个参数分别是目标 x、y、宽、高这里用p.size * 2是因为贴图本身有 16 像素的透明边距实际可见半径约等于p.size。参数上贴图尺寸 32 是够用的再大浪费显存再小放大后模糊。3.3 对象池与批量绘制粒子频繁创建销毁会产生大量垃圾回收压力连续爆炸时能感觉到周期性卡顿。常见做法是用对象池预分配一个固定大小的数组粒子死亡后不删除只标记active false下次爆炸时复用。这样数组长度恒定splice也省了。另一个技巧是合并绘制如果粒子颜色相同可以把所有drawImage调用集中在一起减少状态切换。不过颜色随机时合并意义不大优先做对象池和贴图这两步通常就能把 2000 粒子拉回流畅。提示对象池的容量要设上限比如 3000超出后新爆炸直接复用最老的粒子避免无限增长把内存吃满。4. 避坑与排查粒子特效里最容易翻车的五件事4.1 粒子在 Retina 屏上发虚、位置偏移现象画布上粒子边缘模糊点击位置和爆炸中心对不上。原因只设了 canvas 的 CSS 尺寸没设width/height属性或者设了但没做devicePixelRatio缩放。解决按第 2 章resize的写法先算 dpr把 canvas 的width设为clientWidth * dpr再用ctx.setTransform(dpr, 0, 0, dpr, 0, 0)把坐标系拉回来。点击坐标要用getBoundingClientRect减去偏移不能直接用e.clientX。4.2 粒子越炸越多页面越来越卡现象连续点击几十次后帧率断崖下跌。原因粒子数组只增不减或者decay设得太小导致粒子存活过久。解决确认主循环里有life 0的移除逻辑并且decay不要低于 0.005。更稳的做法是加对象池同时给粒子总数设硬上限超过就丢弃最旧的。4.3 拖尾变成糊屏整个画布一片亮现象粒子消失后残影不散画面越来越白。原因清屏用的半透明底色 alpha 太低比如0.05残影叠加速度超过衰减速度。解决把清屏 alpha 提到0.2到0.3之间或者改用clearRect全清、只在粒子本身做透明度衰减。拖尾和糊屏之间只差一个 alpha 值这个参数要现场调。4.4 移动端点击没反应或触发两次现象手机上点一下爆炸两次或者完全没反应。原因移动端会同时触发touchstart和模拟的click或者只监听了click但被 300ms 延迟吞掉。解决统一用pointerdown事件它同时覆盖鼠标和触摸且没有延迟。如果必须兼容老设备在touchstart里调preventDefault阻止模拟 click。4.5 页面切到后台再回来粒子瞬移现象切走几秒再切回粒子位置跳变。原因requestAnimationFrame在后台会暂停但如果你用时间戳算位移恢复时delta会非常大。解决要么在visibilitychange里重置上一帧时间戳要么干脆用固定步长每帧固定位移牺牲一点物理精确性换稳定。粒子特效对物理精度要求不高固定步长是更省心的选择。5. 进阶让爆炸有层次感的三个参数技巧基础版跑通后想让效果从「能用」到「好看」关键在参数分布而不是加更多粒子。第一个技巧是速度分层不要所有粒子速度都在同一区间随机而是分两到三组一组快而小、一组慢而大快粒子拉出爆炸的锐利感慢粒子填充体积视觉上立刻有层次。第二个技巧是颜色随寿命变化粒子出生时偏亮黄衰减过程中向橙红过渡用hsl的色相随life线性插值即可比固定颜色生动得多。第三个技巧是给初速度加一点方向性偏置比如整体向上偏移 10%模拟爆炸后热气流上升比纯圆形扩散更自然。验证效果时我习惯把decay临时调到 0.002让粒子几乎不消失这样能一眼看出速度分布是否均匀、有没有粒子卡在某个方向。调完再恢复。另一个习惯是打开浏览器的帧率面板连续触发十次爆炸看帧率曲线是否平稳如果出现规律性尖刺多半是垃圾回收在作祟该上对象池了。这套东西不复杂但参数之间的相互影响很微妙我自己的血泪经验是先定粒子总数上限再调速度和寿命最后调颜色和拖尾顺序反了会反复推翻前面的参数。希望帮到你。本文还有配套的精品资源点击获取