如何使用Canvas实现高性能的动画效果？

做Canvas动画时最让人头疼的问题就是掉帧。一段在开发机上跑得飞快的动画，换到低端手机上可能只有二十几帧，画面一顿一顿的。其实很多时候瓶颈并不在硬件，而在于代码的组织方式：每一帧都在全量重绘、频繁创建对象、图片没有预解码，这些细节累积起来就会把性能拖垮。这篇文章从渲染机制讲到具体优化手段，把Canvas动画的常见性能问题逐一拆解。

先理解浏览器的渲染节奏

浏览器通常以每秒60次（部分高刷屏幕是90或120次）的频率刷新页面，也就是说每一帧的预算大约只有16.7毫秒。这16.7毫秒里要完成脚本的执行、样式计算、布局、绘制以及合成，任何一环超时都会导致丢帧。所以在写动画循环之前，先要明白一件事：动画代码本身的开销只是整条流水线的一部分，不能只盯着绘制函数。

驱动动画的正确方式是使用requestAnimationFrame而不是setInterval。requestAnimationFrame会把回调安排在浏览器下一次重绘之前执行，浏览器还能在标签页不可见时自动暂停，节省CPU和电量。而setInterval的时间精度不可控，容易出现回调堆积和画面撕裂。

function loop(timestamp) {
  // timestamp 是上一次回调以来的高精度时间戳，单位毫秒
  update(timestamp);   // 更新状态
  render();            // 绘制画面
  requestAnimationFrame(loop); // 安排下一帧
}
requestAnimationFrame(loop);

另外要注意，如果动画逻辑复杂，建议在回调里自己计算时间增量来驱动位置变化，而不是假设每帧间隔固定16.7毫秒。用timestamp计算delta再做位移，这样即使帧率波动，动画速度也能保持一致。

减少每帧的绘制开销

Canvas是立即模式渲染，每一帧的画面都需要代码重新画一遍。绘制调用越多，CPU耗时越长。第一个优化点是尽量减少draw调用的次数，把多个小图形合并成一张离屏画布，再一次性贴到主画布上。比如一个由几百个静态星星组成的背景，完全不需要每帧重画几百次，只需在初始化时画到离屏Canvas里缓存起来。

// 初始化时把静态背景绘制到离屏画布
const bgCanvas = document.createElement('canvas');
bgCanvas.width = 800;
bgCanvas.height = 600;
const bgCtx = bgCanvas.getContext('2d');

for (let i = 0; i < 500; i++) {
  bgCtx.beginPath();
  bgCtx.arc(Math.random() * 800, Math.random() * 600, Math.random() * 1.5, 0, Math.PI * 2);
  bgCtx.fillStyle = '#fff';
  bgCtx.fill();
}

// 动画循环里只需一次贴图操作
function render() {
  ctx.clearRect(0, 0, 800, 600);
  ctx.drawImage(bgCanvas, 0, 0);
  drawSprites(ctx); // 只绘制真正在动的元素
}

第二个优化点是脏矩形更新。如果画面中只有一小块区域在变化，就没必要清空整个画布，只清除并重绘变化的矩形区域即可。配合设置Canvas的宽高时要谨慎——修改canvas.width会直接清空画布并重置上下文状态，如果只想清屏，用clearRect更合适。

第三个常见坑是状态切换。fillStyle、lineWidth、font这些属性的改变都会触发上下文状态更新，把相同样式的绘制操作归并到一起执行，能明显减少开销。同理，save()和restore()虽然方便，但内部涉及状态栈操作，在热路径上大量使用也要有所节制。

分层渲染与对象管理

当画面由多个性质不同的部分组成时，可以考虑用两个甚至多个Canvas叠放：底层放静态或低频更新的背景，顶层放高速运动的元素。这样背景层不需要每帧重绘，只更新前景层即可。两层通过CSS的position: absolute叠在一起，浏览器会分别合成，比单画布全量重绘省很多开销。

<div style="position: relative; width: 800px; height: 600px;">
  <canvas id="bg" width="800" height="600"
          style="position: absolute; left: 0; top: 0;"></canvas>
  <canvas id="fg" width="800" height="600"
          style="position: absolute; left: 0; top: 0;"></canvas>
</div>

对象管理同样关键。动画循环里每帧new新对象会给垃圾回收器制造大量临时对象，GC一旦触发就可能造成几十毫秒的停顿，直接表现为周期性卡顿。解决办法是使用对象池：粒子消亡后不销毁，放回池中复用；位置、速度等向量数据尽量复用数组，避免解构产生新数组。这一点在粒子系统中效果尤其明显。

还有一个容易被忽略的问题是图片解码。drawImage绘制一张还没解码完的图片时，浏览器需要在主线程同步解码，会造成首帧明显卡顿。正确做法是在初始化阶段用img.decode()或window.onload确保图片就绪，再开始动画。同时尽量把小图合成雪碧图，减少绘制时的寻址开销。

最后，优化不能靠猜。Chrome DevTools的Performance面板可以逐帧分析脚本执行、布局和绘制耗时，找出真正的瓶颈再对症下药。盲目优化静态背景、而真正的开销在物理计算上，再多的绘制技巧也是白费。先测量、再优化，这是性能工作永远不变的原则。

Canvas动画 requestAnimationFrame 高性能渲染修改时间：2026-09-13 09:42:30