简介面向Web前端学习者的HTML5 CanvasSVG彩色水泡分裂动画源码包聚焦两种主流Web图形技术在动画特效中的融合适合希望掌握Canvas绘图、SVG矢量特性并实现交互动效的中级前端开发者。压缩包为前端源码压缩包体积仅3KB代码量精简便于直接阅读核心逻辑目前已有174人浏览学习可作为Canvas与SVG结合的入门参考。项目综合运用Canvas绘制水泡基础形状与运动路径SVG处理高光、阴影等矢量细节并通过requestAnimationFrame控制动画帧率模拟水泡移动、变形与分裂场景同时借助fillStyle、strokeStyle等属性调节颜色和透明度增强视觉层次。解压后阅读源码不仅能梳理Canvas API与SVG标签在实际动画中的分工还可学习如何用JavaScript将大图形拆分为多个子图形并生成独立动画路径是一份不错的Web交互图形编程实践素材。1. 从一支蜡烛到一片气泡海用 CanvasSVG 拆一个会分裂的水泡动画打开压缩包之前我先说结论这个动画的视觉浓度比普通粒子系统高一个量级。普通粒子系统是“点”的运动而水泡分裂要处理“面”的形变、高光位移和父子气泡的层级关系——如果全部用 Canvas 硬画光泽会失真全部用 SVG 做上百个气泡同时分裂时 DOM 节点会拖垮主线程。这个资源最好的地方在于它没有选边站而是把 Canvas 当渲染主体、SVG 当装饰层各干各的活。适合正在做数据可视化大屏、H5 营销页或者想搞懂浏览器双渲染管线怎么协作的人。我按它的代码结构重新梳理一遍再补上参数调优和性能排查的方法。2. 渲染轨道切分Canvas 绘制水泡主体SVG 只留高光与边框2.1 为什么要两种技术混用而不是只用 CanvasCanvas 是位图渲染绘制完就直接把像素交给屏幕它的优势在于批量处理同类型图形时开销极低——画一百个圆和画一个圆调用次数不同但状态切换成本几乎一样。SVG 是保留模式的矢量渲染每个节点都活在 DOM 树里可以被 CSS 动画、CSS 滤镜直接驱动但节点数过千后布局和样式计算会逐渐吃掉帧预算。水泡这个特效刚好卡在两种技术的甜区气泡本体是大量同构的圆形适合 Canvas 批量画而高光、外边框、轻微的环境反射这类需要保持锐利边缘的细节适合用 SVG 的radialGradient和filter来做放大到 retina 屏也不会发虚。这个资源里的典型做法是把 SVG 作为 Canvas 上的覆盖层通过绝对定位叠加在同一个容器中。Canvas 负责每个气泡的“身体”和位置SVG 只画那些 Canvas 里需要保存大量渐变状态才能模拟的高光点。核心代码结构大致是这样div classbubble-stage canvas idbubbleCanvas/canvas svg idhighlightLayer xmlnshttp://www.w3.org/2000/svg width100% height100%/svg /divCanvas 在下SVG 在上两者通过 CSS 的position: absolute叠加。SVG 层的指针事件需要关闭否则会挡住 Canvas 上的点击交互。这种分层思路的价值在于Canvas 每一帧都在清屏重绘如果高光也放进去就必须在同一帧里同时计算位置和渐变代码耦合度高而且每次重绘都要重建渐变对象GC 压力大。SVG 层的高光节点是常驻的重绘时只需要通过transform移动位置浏览器对 SVG transform 的优化远快于重新绘制一段复杂的 Canvas 渐变。2.1.1 分层绘制的职责边界我拆了一份源码后梳理出的职责分配如下职责技术选型原因气泡主体填充Canvasarc() fillStyle批量绘制同构图形状态切换少气泡径向渐变CanvascreateRadialGradient()每帧可动态调整渐变中心模拟光照角度高光点与反光SVGcircle radialGradient矢量边缘清晰缩放不模糊气泡外圈描边SVGcircle stroke避免 Canvas 描边在子像素位置产生锯齿分裂动画的过渡Canvas 每帧重绘需要频繁修改半径和坐标Canvas 无 DOM 开销这里有个容易踩的坑SVG 图层不能直接放在 Canvas 的parentNode之外否则两者的坐标系会因为滚动偏移对不上。实战中一般把两层包在同一个position: relative的容器里并且让 SVG 的viewBox和 Canvas 的width/height保持一致。2.2 气泡主体的 Canvas 绘制实现气泡本质上不是一个纯圆而是一个带厚度感的球体。纯色圆形看起来像饼不像气泡。源码里通常会用径向渐变制造“背光暗、迎光亮”的球体效果function drawBubble(ctx, bubble) { // 渐变中心偏移到左上方模拟顶光 const gradient ctx.createRadialGradient( bubble.x - bubble.radius * 0.3, bubble.y - bubble.radius * 0.3, bubble.radius * 0.1, bubble.x, bubble.y, bubble.radius ); gradient.addColorStop(0, bubble.highlightColor || rgba(255, 255, 255, 0.9)); gradient.addColorStop(0.4, bubble.fillColor || rgba(100, 180, 255, 0.35)); gradient.addColorStop(0.8, bubble.edgeColor || rgba(40, 80, 160, 0.2)); gradient.addColorStop(1, rgba(20, 40, 80, 0.05)); ctx.beginPath(); ctx.arc(bubble.x, bubble.y, bubble.radius, 0, Math.PI * 2); ctx.fillStyle gradient; ctx.fill(); // 底部轻微内阴影模拟液体表面张力导致的暗区 ctx.globalCompositeOperation source-atop; ctx.beginPath(); ctx.arc(bubble.x, bubble.y, bubble.radius, 0, Math.PI * 2); ctx.fillStyle rgba(0, 0, 0, 0.08); ctx.fill(); ctx.globalCompositeOperation source-over; }createRadialGradient的前四个参数是内圆圆心与半径后三个是外圆圆心与半径。把内圆圆心往左上偏移就能模拟顶光源addColorStop的四个色标控制了从高光到边缘暗部的过渡节奏。特别注意globalCompositeOperation的切换——source-atop会把内阴影限制在已有像素范围内避免阴影溢出到气泡外面。SVG 层的高光则是另外一套逻辑通常用radialGradient定义一个白色到透明的小圆叠加在 Canvas 气泡的对应位置上。SVG 高光的坐标需要和 Canvas 气泡坐标保持同步一般通过transform属性更新defs radialGradient idspecular cx30% cy30% r50% stop offset0% stop-colorrgba(255,255,255,0.95) / stop offset100% stop-colorrgba(255,255,255,0) / /radialGradient /defsSVG 的渐变定义在整个生命周期只需创建一次运行期只更新circle的cx、cy和r。这样每一帧的 DOM 操作从“改一堆属性”降级为“改三个数字”浏览器能直接走快速路径。3. 分裂算法与物理边界把一个大泡变成二十个小泡的递归逻辑3.1 分裂触发条件与子泡生成策略水泡不会凭空分裂源码里一般会设定两类触发定时分裂和碰撞分裂。定时分裂是每个气泡每隔若干秒随机分裂一次碰撞分裂则是两个气泡距离小于半径之和时较大的一方分裂。无论哪种分裂的核心是“父泡消失生成 N 个子泡”。子泡数量不是固定的我见过最常见的策略是2 Math.floor(Math.random() * 3)也就是 2 到 4 个偶尔出现三等分。生成子泡时要保证基本物理规律不崩坏面积守恒。若父泡半径为R子泡半径r_i要满足π * R² ≈ ∑ π * r_i²代码实现并不复杂但很多初学者会漏掉分配策略function splitBubble(bubble, bubbles, maxBubbles) { // 超过全局上限时只缩小不再分裂 if (bubbles.length maxBubbles) { bubble.radius * 0.92; return; } const count 2 Math.floor(Math.random() * 3); const totalArea Math.PI * bubble.radius * bubble.radius; // 随机权重面积按权重分配保证总和不突变 const weights Array.from({ length: count }, () 0.5 Math.random()); const weightSum weights.reduce((a, b) a b, 0); // 从当前气泡数组中移除父泡 const parentIndex bubbles.indexOf(bubble); if (parentIndex ! -1) bubbles.splice(parentIndex, 1); for (let i 0; i count; i) { const childRadius Math.sqrt(totalArea * weights[i] / weightSum / Math.PI); const angle (Math.PI * 2 * i / count) Math.random() * 0.8; bubbles.push({ x: bubble.x Math.cos(angle) * bubble.radius * 0.3, y: bubble.y Math.sin(angle) * bubble.radius * 0.3, radius: Math.max(childRadius, 4), // 最小半径兜底避免出现 0.1px 的幽灵泡 vx: bubble.vx * 0.6 Math.cos(angle) * 1.5, vy: bubble.vy * 0.6 - Math.sin(angle) * 1.5, fillColor: shiftHue(bubble.fillColor, Math.random() * 30 - 15), }); } }子泡初始位置放在父泡中心附近沿圆周按角度均匀展开这样视觉上是“炸开”而不是弹射。childRadius的平方根计算不能省——如果直接按权重比例分配半径面积和会小于父泡动画会因为“凭空消失了一部分体积”而显得不自然。shiftHue是色相偏移函数让子泡颜色继承自父泡但略有变化这比每次随机颜色更耐看。提示bubbles.indexOf(bubble)的时间复杂度是 O(n)分裂频繁时会有可感知的卡顿。如果气泡数量超过 300建议给每个气泡挂id用 Map 索引。3.2 边界反弹与气泡之间的排斥光有分裂还不够水泡要浮起来才像真的。一般通过给气泡一个向上的加速度vy - gravity注意 Canvas 坐标系 y 轴向下模拟水中浮力。边界处理上墙壁反弹通常会保留法向速度的 0.8 倍function updatePhysics(bubble, width, height) { // 浮力与阻力 bubble.vy - 0.02; // 模拟浮力方向朝屏幕上方 bubble.vx * 0.995; // 水平方向空气阻力 bubble.vy * 0.998; bubble.x bubble.vx; bubble.y bubble.vy; // 左右边界反转水平速度并衰减 if (bubble.x bubble.radius) { bubble.x bubble.radius; bubble.vx Math.abs(bubble.vx) * 0.8; } if (bubble.x width - bubble.radius) { bubble.x width - bubble.radius; bubble.vx -Math.abs(bubble.vx) * 0.8; } // 上边界速度衰减并反弹下边界越过底部则重置回顶部 if (bubble.y bubble.radius) { bubble.y bubble.radius; bubble.vy Math.abs(bubble.vy) * 0.75; } if (bubble.y height bubble.radius) { bubble.y height bubble.radius; bubble.vy -Math.abs(bubble.vy) * 0.5; } }气泡间碰撞这里有一个性能陷阱双重循环判断两两碰撞是 O(n²)100 个气泡就是 4950 次距离计算可能还带着Math.sqrt在低端移动设备上会消耗大量帧时间。常见的优化是先用距离平方比较只有在必要时才开平方function checkCollision(a, b) { const dx a.x - b.x; const dy a.y - b.y; const minDist a.radius b.radius; // 先比较平方距离避免每帧都做开方运算 if (dx * dx dy * dy minDist * minDist) { return true; } return false; }更进一步的做法是使用空间哈希网格把画布划分为多个格子每个格子维护气泡列表只检查同一格子及相邻格子的气泡对。对于本项目的规模同时存活 100~200 个气泡平方距离优化已经够用不需要上网格。3.3 分裂层级限制防止指数爆炸分裂动画最常见的问题是小泡继续分裂成更小的泡数量指数增长最终整个页面卡死。源码里一般有两个保险全局数量上限maxBubbles和最小分裂半径minSplitRadius。const MAX_BUBBLES 160; const MIN_SPLIT_RADIUS 8; function shouldSplit(bubble) { return bubble.radius MIN_SPLIT_RADIUS bubbleCount MAX_BUBBLES; }这两个参数直接决定了动画的口味MIN_SPLIT_RADIUS调大画面会更稀疏适合做背景装饰调小则更密集适合做主视觉但 CPU 占用升高。MAX_BUBBLES设太高会让低端机掉帧设太低又显得不够热闹。建议移动端设 80桌面端设 160 起步。4. 性能兜底离屏 Canvas、内存池与 requestAnimationFrame 裁剪4.1 离屏 Canvas 预渲染气泡纹理每个气泡都要调用createRadialGradient并填充如果每帧全部重建Canvas 的渐变计算开销是很大的。更合理的方式是预渲染把不同色系、不同大小的气泡绘制到离屏 Canvas 上运行期直接drawImage贴图。const offscreenCache {}; function createBubbleSprite(radius, color) { const key ${radius.toFixed(1)}-${color}; if (offscreenCache[key]) return offscreenCache[key]; // 离屏 canvas 的尺寸略大于半径避免边缘裁剪 const canvas document.createElement(canvas); canvas.width radius * 2 4; canvas.height radius * 2 4; const ctx canvas.getContext(2d); const centerX canvas.width / 2; const centerY canvas.height / 2; const gradient ctx.createRadialGradient( centerX - radius * 0.3, centerY - radius * 0.3, radius * 0.1, centerX, centerY, radius ); gradient.addColorStop(0, rgba(255, 255, 255, 0.85)); gradient.addColorStop(0.5, color); gradient.addColorStop(1, rgba(0, 0, 0, 0.05)); ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, Math.PI * 2); ctx.fillStyle gradient; ctx.fill(); offscreenCache[key] canvas; return canvas; }运行期绘制时只需要一次drawImageconst sprite createBubbleSprite(bubble.radius, bubble.fillColor); ctx.drawImage(sprite, bubble.x - sprite.width / 2, bubble.y - sprite.height / 2);drawImage的性能远高于重新走一遍渐变填充。代价是气泡数量极多时缓存会占用内存所以缓存 key 要带半径精度同尺寸同色系共享同一张 sprite。源码中如果看到document.createElement(canvas)被循环调用八成就是这个套路。提示drawImage是 GPU 加速友好的操作但在放大或缩小时会触发重新采样。如果气泡在动画中有明显的缩放变化建议按最大尺寸生成 sprite之后只做平移不做 scale。4.2 对象池避免 GC 毛刺JavaScript 引擎的垃圾回收GC是不可控的频繁创建和销毁对象会在 200ms 级别触发暂停表现为动画的周期性卡顿。对象池的思路是提前创建一批不活跃的对象用active标志区分存活状态const bubblePool []; const poolSize 120; // 初始化时全部置为 inactive for (let i 0; i poolSize; i) { bubblePool.push({ active: false, x: 0, y: 0, vx: 0, vy: 0, radius: 10, fillColor: #cb6ce6, }); } function acquireBubble(init) { for (let i 0; i bubblePool.length; i) { if (!bubblePool[i].active) { Object.assign(bubblePool[i], init, { active: true }); return bubblePool[i]; } } return null; // 池满忽略新建请求 } function releaseBubble(bubble) { bubble.active false; }分裂产生子泡时从池中acquireBubble不新建对象父泡销毁时releaseBubble对象回池。这能让堆内存保持稳定帧率曲线更平滑。具体到代码里就是把 GitHub 上最常见的数组splice删除换成标记位删除渲染时过滤active节点避免数组移动带来的内存搬移。4.3 按需裁剪与 DPR 适配很多人忽略的一个优化点是气泡完全在屏幕外时绘制它的所有逻辑都是白费的。在drawBubble之前加一个简单的边界判断if (bubble.x bubble.radius 0 || bubble.x - bubble.radius canvas.width || bubble.y bubble.radius 0 || bubble.y - bubble.radius canvas.height) { return; // 跳过屏幕外的气泡 }另一个关键参数是devicePixelRatio。高分屏上 Canvas 的width/height如果不乘以 DPR画面会发糊乘了之后绘制面积变大四倍性能下降。主流做法是设定 DPR 上限const DPR Math.min(window.devicePixelRatio || 1, 2); canvas.width container.clientWidth * DPR; canvas.height container.clientHeight * DPR; canvas.getContext(2d).scale(DPR, DPR);DPR 上限设 2 是性能和清晰度的平衡点3 倍屏部分安卓旗舰强行跑 3 倍画布收益有限但开销翻倍。4.4 requestAnimationFrame 的正确打开方式动画主循环用requestAnimationFrame是常识但我发现很多项目的代码会把整个绘制逻辑直接塞进回调里不做任何增量判断。合理的结构是一个死循环里先更新物理状态再判断是否需要重绘把重绘频率降到每秒 30 帧也能保持视觉流畅let lastTime 0; const MIN_FRAME_INTERVAL 1000 / 30; // 30fps 兜底 function animate(timestamp) { requestAnimationFrame(animate); const delta timestamp - lastTime; if (delta MIN_FRAME_INTERVAL) return; // 跳过这一帧节能 lastTime timestamp; updatePhysics(); // 更新所有气泡的位置、速度 renderFrame(); // 绘制 Canvas 并同步 SVG 高光位置 } requestAnimationFrame(animate);通过delta控制帧率策略可以在多开标签页时自动降低刷新率避免后台标签页消耗 GPU。源码演示中可能没有写这一段但投入运行时非常值得加上。5. 解压即跑的验证方法与调参技巧5.1 从零到看到动画的最小操作路径拿到压缩包后常见的错误是直接在文件管理器里双击index.html然后用file://协议打开。如果 Canvas 动画里加载了本地图片或 JSON 数据file://会被浏览器跨域策略拦截画面空白。推荐的做法是在项目根目录启动一个静态文件服务器cd html5-canvas-svg-bubble python3 -m http.server 8080然后在浏览器访问http://localhost:8080。如果本机没有 Python 3npx serve .也可以前者更常见。打开页面后如果看不见水泡优先打开 DevTools 的 Console 面板看有无红色报错。最常见的三个问题canvas.getContext(2d)返回null说明 Canvas 元素被重复初始化或 id 冲突SVG 高光层没有对齐 Canvas检查父容器是否设置了position: relativeSVG 是否设置了left: 0; top: 0水泡只出现在左上角Canvas 的width/height和 CSS 尺寸不一致通常是忘了乘以devicePixelRatio5.2 用 Performance 面板定位卡顿瓶颈动画能跑了接下来就是验证性能。打开 DevTools 的 Performance 面板点击 Record操作几轮分裂然后停止录制。重点看两条绿色竖条是否每一帧都出现在预期位置以及Main区域里Scripting和Rendering的占比。如果Scripting占比超过 20%问题大概率在物理计算或 Canvas 绘制代码如果Rendering占比过高则是 SVG 节点重排或 Canvas 尺寸过大。此时可以打开Rendering面板的Frame Rendering Stats观察 GPU 占用和帧率曲线。还有一个更高阶的验证工具Chrome 的Paint flashing功能。如果它把 SVG 层的局部更新也标记为闪烁说明浏览器每次都在重绘高亮层的大块区域这时可以给 SVG 层设置will-change: transform提示浏览器把该层提升为独立合成层#highlightLayer { will-change: transform; }但注意不要滥用will-change每个合成层都占用 GPU 内存层数过多移动端反而更卡。5.3 把源码改成你自己的产品拿到演示源码后不要满足于跑通流程。我建议你按顺序做三件事第一把颜色方案改成自定义配置。将气泡的高光色、填充色、边缘色抽成一个THEME常量对象以便后续切换不同风格。const THEME { primary: { hue: 210, saturation: 80, lightness: 60 }, specular: rgba(255, 255, 255, 0.8), environment: rgba(80, 140, 200, 0.1), };色相用hsl而不是rgb的好处是水泡颜色的调整上限更高后续代码可以随时做渐变调色。第二给动画加交互点击事件触发一次“强制分裂”或“生成新气泡”。在 Canvas 上监听这个需要做坐标换算因为 Canvas 的clientWidth和内部width可能不同canvas.addEventListener(pointerdown, (e) { const rect canvas.getBoundingClientRect(); const scaleX canvas.width / rect.width / DPR; const scaleY canvas.height / rect.height / DPR; const mouseX (e.clientX - rect.left) * scaleX; const mouseY (e.clientY - rect.top) * scaleY; // 在鼠标位置添加一个半径 30 的气泡 });注意缩放因子要除以 DPR 一次鼠标坐标对齐分毫不差。第三把 Canvas 尺寸变化监听起来当容器 resize 时同时调整画布大小和 SVG 层尺寸并重新计算已有气泡的边界避免 resize 后气泡飞出可视区域再也回不来。这一步是 HTML5 动画承接真实业务需求时最容易出错的而它在这个演示项目里往往是被忽略的。本文还有配套的精品资源点击获取
Canvas+SVG混合实现水泡分裂动画的性能优化实践
简介面向Web前端学习者的HTML5 CanvasSVG彩色水泡分裂动画源码包聚焦两种主流Web图形技术在动画特效中的融合适合希望掌握Canvas绘图、SVG矢量特性并实现交互动效的中级前端开发者。压缩包为前端源码压缩包体积仅3KB代码量精简便于直接阅读核心逻辑目前已有174人浏览学习可作为Canvas与SVG结合的入门参考。项目综合运用Canvas绘制水泡基础形状与运动路径SVG处理高光、阴影等矢量细节并通过requestAnimationFrame控制动画帧率模拟水泡移动、变形与分裂场景同时借助fillStyle、strokeStyle等属性调节颜色和透明度增强视觉层次。解压后阅读源码不仅能梳理Canvas API与SVG标签在实际动画中的分工还可学习如何用JavaScript将大图形拆分为多个子图形并生成独立动画路径是一份不错的Web交互图形编程实践素材。1. 从一支蜡烛到一片气泡海用 CanvasSVG 拆一个会分裂的水泡动画打开压缩包之前我先说结论这个动画的视觉浓度比普通粒子系统高一个量级。普通粒子系统是“点”的运动而水泡分裂要处理“面”的形变、高光位移和父子气泡的层级关系——如果全部用 Canvas 硬画光泽会失真全部用 SVG 做上百个气泡同时分裂时 DOM 节点会拖垮主线程。这个资源最好的地方在于它没有选边站而是把 Canvas 当渲染主体、SVG 当装饰层各干各的活。适合正在做数据可视化大屏、H5 营销页或者想搞懂浏览器双渲染管线怎么协作的人。我按它的代码结构重新梳理一遍再补上参数调优和性能排查的方法。2. 渲染轨道切分Canvas 绘制水泡主体SVG 只留高光与边框2.1 为什么要两种技术混用而不是只用 CanvasCanvas 是位图渲染绘制完就直接把像素交给屏幕它的优势在于批量处理同类型图形时开销极低——画一百个圆和画一个圆调用次数不同但状态切换成本几乎一样。SVG 是保留模式的矢量渲染每个节点都活在 DOM 树里可以被 CSS 动画、CSS 滤镜直接驱动但节点数过千后布局和样式计算会逐渐吃掉帧预算。水泡这个特效刚好卡在两种技术的甜区气泡本体是大量同构的圆形适合 Canvas 批量画而高光、外边框、轻微的环境反射这类需要保持锐利边缘的细节适合用 SVG 的radialGradient和filter来做放大到 retina 屏也不会发虚。这个资源里的典型做法是把 SVG 作为 Canvas 上的覆盖层通过绝对定位叠加在同一个容器中。Canvas 负责每个气泡的“身体”和位置SVG 只画那些 Canvas 里需要保存大量渐变状态才能模拟的高光点。核心代码结构大致是这样div classbubble-stage canvas idbubbleCanvas/canvas svg idhighlightLayer xmlnshttp://www.w3.org/2000/svg width100% height100%/svg /divCanvas 在下SVG 在上两者通过 CSS 的position: absolute叠加。SVG 层的指针事件需要关闭否则会挡住 Canvas 上的点击交互。这种分层思路的价值在于Canvas 每一帧都在清屏重绘如果高光也放进去就必须在同一帧里同时计算位置和渐变代码耦合度高而且每次重绘都要重建渐变对象GC 压力大。SVG 层的高光节点是常驻的重绘时只需要通过transform移动位置浏览器对 SVG transform 的优化远快于重新绘制一段复杂的 Canvas 渐变。2.1.1 分层绘制的职责边界我拆了一份源码后梳理出的职责分配如下职责技术选型原因气泡主体填充Canvasarc() fillStyle批量绘制同构图形状态切换少气泡径向渐变CanvascreateRadialGradient()每帧可动态调整渐变中心模拟光照角度高光点与反光SVGcircle radialGradient矢量边缘清晰缩放不模糊气泡外圈描边SVGcircle stroke避免 Canvas 描边在子像素位置产生锯齿分裂动画的过渡Canvas 每帧重绘需要频繁修改半径和坐标Canvas 无 DOM 开销这里有个容易踩的坑SVG 图层不能直接放在 Canvas 的parentNode之外否则两者的坐标系会因为滚动偏移对不上。实战中一般把两层包在同一个position: relative的容器里并且让 SVG 的viewBox和 Canvas 的width/height保持一致。2.2 气泡主体的 Canvas 绘制实现气泡本质上不是一个纯圆而是一个带厚度感的球体。纯色圆形看起来像饼不像气泡。源码里通常会用径向渐变制造“背光暗、迎光亮”的球体效果function drawBubble(ctx, bubble) { // 渐变中心偏移到左上方模拟顶光 const gradient ctx.createRadialGradient( bubble.x - bubble.radius * 0.3, bubble.y - bubble.radius * 0.3, bubble.radius * 0.1, bubble.x, bubble.y, bubble.radius ); gradient.addColorStop(0, bubble.highlightColor || rgba(255, 255, 255, 0.9)); gradient.addColorStop(0.4, bubble.fillColor || rgba(100, 180, 255, 0.35)); gradient.addColorStop(0.8, bubble.edgeColor || rgba(40, 80, 160, 0.2)); gradient.addColorStop(1, rgba(20, 40, 80, 0.05)); ctx.beginPath(); ctx.arc(bubble.x, bubble.y, bubble.radius, 0, Math.PI * 2); ctx.fillStyle gradient; ctx.fill(); // 底部轻微内阴影模拟液体表面张力导致的暗区 ctx.globalCompositeOperation source-atop; ctx.beginPath(); ctx.arc(bubble.x, bubble.y, bubble.radius, 0, Math.PI * 2); ctx.fillStyle rgba(0, 0, 0, 0.08); ctx.fill(); ctx.globalCompositeOperation source-over; }createRadialGradient的前四个参数是内圆圆心与半径后三个是外圆圆心与半径。把内圆圆心往左上偏移就能模拟顶光源addColorStop的四个色标控制了从高光到边缘暗部的过渡节奏。特别注意globalCompositeOperation的切换——source-atop会把内阴影限制在已有像素范围内避免阴影溢出到气泡外面。SVG 层的高光则是另外一套逻辑通常用radialGradient定义一个白色到透明的小圆叠加在 Canvas 气泡的对应位置上。SVG 高光的坐标需要和 Canvas 气泡坐标保持同步一般通过transform属性更新defs radialGradient idspecular cx30% cy30% r50% stop offset0% stop-colorrgba(255,255,255,0.95) / stop offset100% stop-colorrgba(255,255,255,0) / /radialGradient /defsSVG 的渐变定义在整个生命周期只需创建一次运行期只更新circle的cx、cy和r。这样每一帧的 DOM 操作从“改一堆属性”降级为“改三个数字”浏览器能直接走快速路径。3. 分裂算法与物理边界把一个大泡变成二十个小泡的递归逻辑3.1 分裂触发条件与子泡生成策略水泡不会凭空分裂源码里一般会设定两类触发定时分裂和碰撞分裂。定时分裂是每个气泡每隔若干秒随机分裂一次碰撞分裂则是两个气泡距离小于半径之和时较大的一方分裂。无论哪种分裂的核心是“父泡消失生成 N 个子泡”。子泡数量不是固定的我见过最常见的策略是2 Math.floor(Math.random() * 3)也就是 2 到 4 个偶尔出现三等分。生成子泡时要保证基本物理规律不崩坏面积守恒。若父泡半径为R子泡半径r_i要满足π * R² ≈ ∑ π * r_i²代码实现并不复杂但很多初学者会漏掉分配策略function splitBubble(bubble, bubbles, maxBubbles) { // 超过全局上限时只缩小不再分裂 if (bubbles.length maxBubbles) { bubble.radius * 0.92; return; } const count 2 Math.floor(Math.random() * 3); const totalArea Math.PI * bubble.radius * bubble.radius; // 随机权重面积按权重分配保证总和不突变 const weights Array.from({ length: count }, () 0.5 Math.random()); const weightSum weights.reduce((a, b) a b, 0); // 从当前气泡数组中移除父泡 const parentIndex bubbles.indexOf(bubble); if (parentIndex ! -1) bubbles.splice(parentIndex, 1); for (let i 0; i count; i) { const childRadius Math.sqrt(totalArea * weights[i] / weightSum / Math.PI); const angle (Math.PI * 2 * i / count) Math.random() * 0.8; bubbles.push({ x: bubble.x Math.cos(angle) * bubble.radius * 0.3, y: bubble.y Math.sin(angle) * bubble.radius * 0.3, radius: Math.max(childRadius, 4), // 最小半径兜底避免出现 0.1px 的幽灵泡 vx: bubble.vx * 0.6 Math.cos(angle) * 1.5, vy: bubble.vy * 0.6 - Math.sin(angle) * 1.5, fillColor: shiftHue(bubble.fillColor, Math.random() * 30 - 15), }); } }子泡初始位置放在父泡中心附近沿圆周按角度均匀展开这样视觉上是“炸开”而不是弹射。childRadius的平方根计算不能省——如果直接按权重比例分配半径面积和会小于父泡动画会因为“凭空消失了一部分体积”而显得不自然。shiftHue是色相偏移函数让子泡颜色继承自父泡但略有变化这比每次随机颜色更耐看。提示bubbles.indexOf(bubble)的时间复杂度是 O(n)分裂频繁时会有可感知的卡顿。如果气泡数量超过 300建议给每个气泡挂id用 Map 索引。3.2 边界反弹与气泡之间的排斥光有分裂还不够水泡要浮起来才像真的。一般通过给气泡一个向上的加速度vy - gravity注意 Canvas 坐标系 y 轴向下模拟水中浮力。边界处理上墙壁反弹通常会保留法向速度的 0.8 倍function updatePhysics(bubble, width, height) { // 浮力与阻力 bubble.vy - 0.02; // 模拟浮力方向朝屏幕上方 bubble.vx * 0.995; // 水平方向空气阻力 bubble.vy * 0.998; bubble.x bubble.vx; bubble.y bubble.vy; // 左右边界反转水平速度并衰减 if (bubble.x bubble.radius) { bubble.x bubble.radius; bubble.vx Math.abs(bubble.vx) * 0.8; } if (bubble.x width - bubble.radius) { bubble.x width - bubble.radius; bubble.vx -Math.abs(bubble.vx) * 0.8; } // 上边界速度衰减并反弹下边界越过底部则重置回顶部 if (bubble.y bubble.radius) { bubble.y bubble.radius; bubble.vy Math.abs(bubble.vy) * 0.75; } if (bubble.y height bubble.radius) { bubble.y height bubble.radius; bubble.vy -Math.abs(bubble.vy) * 0.5; } }气泡间碰撞这里有一个性能陷阱双重循环判断两两碰撞是 O(n²)100 个气泡就是 4950 次距离计算可能还带着Math.sqrt在低端移动设备上会消耗大量帧时间。常见的优化是先用距离平方比较只有在必要时才开平方function checkCollision(a, b) { const dx a.x - b.x; const dy a.y - b.y; const minDist a.radius b.radius; // 先比较平方距离避免每帧都做开方运算 if (dx * dx dy * dy minDist * minDist) { return true; } return false; }更进一步的做法是使用空间哈希网格把画布划分为多个格子每个格子维护气泡列表只检查同一格子及相邻格子的气泡对。对于本项目的规模同时存活 100~200 个气泡平方距离优化已经够用不需要上网格。3.3 分裂层级限制防止指数爆炸分裂动画最常见的问题是小泡继续分裂成更小的泡数量指数增长最终整个页面卡死。源码里一般有两个保险全局数量上限maxBubbles和最小分裂半径minSplitRadius。const MAX_BUBBLES 160; const MIN_SPLIT_RADIUS 8; function shouldSplit(bubble) { return bubble.radius MIN_SPLIT_RADIUS bubbleCount MAX_BUBBLES; }这两个参数直接决定了动画的口味MIN_SPLIT_RADIUS调大画面会更稀疏适合做背景装饰调小则更密集适合做主视觉但 CPU 占用升高。MAX_BUBBLES设太高会让低端机掉帧设太低又显得不够热闹。建议移动端设 80桌面端设 160 起步。4. 性能兜底离屏 Canvas、内存池与 requestAnimationFrame 裁剪4.1 离屏 Canvas 预渲染气泡纹理每个气泡都要调用createRadialGradient并填充如果每帧全部重建Canvas 的渐变计算开销是很大的。更合理的方式是预渲染把不同色系、不同大小的气泡绘制到离屏 Canvas 上运行期直接drawImage贴图。const offscreenCache {}; function createBubbleSprite(radius, color) { const key ${radius.toFixed(1)}-${color}; if (offscreenCache[key]) return offscreenCache[key]; // 离屏 canvas 的尺寸略大于半径避免边缘裁剪 const canvas document.createElement(canvas); canvas.width radius * 2 4; canvas.height radius * 2 4; const ctx canvas.getContext(2d); const centerX canvas.width / 2; const centerY canvas.height / 2; const gradient ctx.createRadialGradient( centerX - radius * 0.3, centerY - radius * 0.3, radius * 0.1, centerX, centerY, radius ); gradient.addColorStop(0, rgba(255, 255, 255, 0.85)); gradient.addColorStop(0.5, color); gradient.addColorStop(1, rgba(0, 0, 0, 0.05)); ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, Math.PI * 2); ctx.fillStyle gradient; ctx.fill(); offscreenCache[key] canvas; return canvas; }运行期绘制时只需要一次drawImageconst sprite createBubbleSprite(bubble.radius, bubble.fillColor); ctx.drawImage(sprite, bubble.x - sprite.width / 2, bubble.y - sprite.height / 2);drawImage的性能远高于重新走一遍渐变填充。代价是气泡数量极多时缓存会占用内存所以缓存 key 要带半径精度同尺寸同色系共享同一张 sprite。源码中如果看到document.createElement(canvas)被循环调用八成就是这个套路。提示drawImage是 GPU 加速友好的操作但在放大或缩小时会触发重新采样。如果气泡在动画中有明显的缩放变化建议按最大尺寸生成 sprite之后只做平移不做 scale。4.2 对象池避免 GC 毛刺JavaScript 引擎的垃圾回收GC是不可控的频繁创建和销毁对象会在 200ms 级别触发暂停表现为动画的周期性卡顿。对象池的思路是提前创建一批不活跃的对象用active标志区分存活状态const bubblePool []; const poolSize 120; // 初始化时全部置为 inactive for (let i 0; i poolSize; i) { bubblePool.push({ active: false, x: 0, y: 0, vx: 0, vy: 0, radius: 10, fillColor: #cb6ce6, }); } function acquireBubble(init) { for (let i 0; i bubblePool.length; i) { if (!bubblePool[i].active) { Object.assign(bubblePool[i], init, { active: true }); return bubblePool[i]; } } return null; // 池满忽略新建请求 } function releaseBubble(bubble) { bubble.active false; }分裂产生子泡时从池中acquireBubble不新建对象父泡销毁时releaseBubble对象回池。这能让堆内存保持稳定帧率曲线更平滑。具体到代码里就是把 GitHub 上最常见的数组splice删除换成标记位删除渲染时过滤active节点避免数组移动带来的内存搬移。4.3 按需裁剪与 DPR 适配很多人忽略的一个优化点是气泡完全在屏幕外时绘制它的所有逻辑都是白费的。在drawBubble之前加一个简单的边界判断if (bubble.x bubble.radius 0 || bubble.x - bubble.radius canvas.width || bubble.y bubble.radius 0 || bubble.y - bubble.radius canvas.height) { return; // 跳过屏幕外的气泡 }另一个关键参数是devicePixelRatio。高分屏上 Canvas 的width/height如果不乘以 DPR画面会发糊乘了之后绘制面积变大四倍性能下降。主流做法是设定 DPR 上限const DPR Math.min(window.devicePixelRatio || 1, 2); canvas.width container.clientWidth * DPR; canvas.height container.clientHeight * DPR; canvas.getContext(2d).scale(DPR, DPR);DPR 上限设 2 是性能和清晰度的平衡点3 倍屏部分安卓旗舰强行跑 3 倍画布收益有限但开销翻倍。4.4 requestAnimationFrame 的正确打开方式动画主循环用requestAnimationFrame是常识但我发现很多项目的代码会把整个绘制逻辑直接塞进回调里不做任何增量判断。合理的结构是一个死循环里先更新物理状态再判断是否需要重绘把重绘频率降到每秒 30 帧也能保持视觉流畅let lastTime 0; const MIN_FRAME_INTERVAL 1000 / 30; // 30fps 兜底 function animate(timestamp) { requestAnimationFrame(animate); const delta timestamp - lastTime; if (delta MIN_FRAME_INTERVAL) return; // 跳过这一帧节能 lastTime timestamp; updatePhysics(); // 更新所有气泡的位置、速度 renderFrame(); // 绘制 Canvas 并同步 SVG 高光位置 } requestAnimationFrame(animate);通过delta控制帧率策略可以在多开标签页时自动降低刷新率避免后台标签页消耗 GPU。源码演示中可能没有写这一段但投入运行时非常值得加上。5. 解压即跑的验证方法与调参技巧5.1 从零到看到动画的最小操作路径拿到压缩包后常见的错误是直接在文件管理器里双击index.html然后用file://协议打开。如果 Canvas 动画里加载了本地图片或 JSON 数据file://会被浏览器跨域策略拦截画面空白。推荐的做法是在项目根目录启动一个静态文件服务器cd html5-canvas-svg-bubble python3 -m http.server 8080然后在浏览器访问http://localhost:8080。如果本机没有 Python 3npx serve .也可以前者更常见。打开页面后如果看不见水泡优先打开 DevTools 的 Console 面板看有无红色报错。最常见的三个问题canvas.getContext(2d)返回null说明 Canvas 元素被重复初始化或 id 冲突SVG 高光层没有对齐 Canvas检查父容器是否设置了position: relativeSVG 是否设置了left: 0; top: 0水泡只出现在左上角Canvas 的width/height和 CSS 尺寸不一致通常是忘了乘以devicePixelRatio5.2 用 Performance 面板定位卡顿瓶颈动画能跑了接下来就是验证性能。打开 DevTools 的 Performance 面板点击 Record操作几轮分裂然后停止录制。重点看两条绿色竖条是否每一帧都出现在预期位置以及Main区域里Scripting和Rendering的占比。如果Scripting占比超过 20%问题大概率在物理计算或 Canvas 绘制代码如果Rendering占比过高则是 SVG 节点重排或 Canvas 尺寸过大。此时可以打开Rendering面板的Frame Rendering Stats观察 GPU 占用和帧率曲线。还有一个更高阶的验证工具Chrome 的Paint flashing功能。如果它把 SVG 层的局部更新也标记为闪烁说明浏览器每次都在重绘高亮层的大块区域这时可以给 SVG 层设置will-change: transform提示浏览器把该层提升为独立合成层#highlightLayer { will-change: transform; }但注意不要滥用will-change每个合成层都占用 GPU 内存层数过多移动端反而更卡。5.3 把源码改成你自己的产品拿到演示源码后不要满足于跑通流程。我建议你按顺序做三件事第一把颜色方案改成自定义配置。将气泡的高光色、填充色、边缘色抽成一个THEME常量对象以便后续切换不同风格。const THEME { primary: { hue: 210, saturation: 80, lightness: 60 }, specular: rgba(255, 255, 255, 0.8), environment: rgba(80, 140, 200, 0.1), };色相用hsl而不是rgb的好处是水泡颜色的调整上限更高后续代码可以随时做渐变调色。第二给动画加交互点击事件触发一次“强制分裂”或“生成新气泡”。在 Canvas 上监听这个需要做坐标换算因为 Canvas 的clientWidth和内部width可能不同canvas.addEventListener(pointerdown, (e) { const rect canvas.getBoundingClientRect(); const scaleX canvas.width / rect.width / DPR; const scaleY canvas.height / rect.height / DPR; const mouseX (e.clientX - rect.left) * scaleX; const mouseY (e.clientY - rect.top) * scaleY; // 在鼠标位置添加一个半径 30 的气泡 });注意缩放因子要除以 DPR 一次鼠标坐标对齐分毫不差。第三把 Canvas 尺寸变化监听起来当容器 resize 时同时调整画布大小和 SVG 层尺寸并重新计算已有气泡的边界避免 resize 后气泡飞出可视区域再也回不来。这一步是 HTML5 动画承接真实业务需求时最容易出错的而它在这个演示项目里往往是被忽略的。本文还有配套的精品资源点击获取