构建高性能Canvas动画：requestAnimationFrame循环逻辑-H5教程-PHP中文网

用requestanimationframe构建canvas动画需遵循四大原则：一、用isrunning状态机控制启停循环；二、基于performance.now()计算delta time实现帧率无关运动；三、局部清屏、离屏渲染、复用path2d优化绘制；四、分离逻辑与渲染，耗时操作移至web worker或requestidlecallback。

构建高性能canvas动画：requestanimationframe循环逻辑

用 requestAnimationFrame（简称 rAF）构建 Canvas 动画，核心在于建立一个**稳定、可控、与屏幕刷新率同步**的循环逻辑，而不是简单套用 setInterval 或递归 setTimeout。关键不是“怎么调用 rAF”，而是“在每一帧里该做什么、怎么做才不掉帧、不卡顿”。

一、基础循环结构：避免隐式递归陷阱

rAF 本身是单次调用，必须手动“续订”才能形成动画循环。常见错误是直接在回调里无条件再调一次 rAF：

function animate() {
  draw(); // 绘制
  requestAnimationFrame(animate); // ❌ 没有控制条件，停不下来
}
animate();

正确做法是把循环逻辑封装成可启停的状态机：

用布尔变量（如 isRunning）控制是否继续下一帧
每次 rAF 回调开头检查状态，决定是否继续调用
提供 start() 和 stop() 方法，方便生命周期管理

二、时间驱动：用 delta time 实现帧率无关运动

不要假设每帧都是 16.67ms（60fps）。设备负载、后台标签页、高刷新率屏幕都会导致实际间隔波动。应基于真实时间差计算位移：

记录上一帧的时间戳（lastTime），当前帧用 performance.now() 获取新时间戳
计算差值 delta = now - lastTime（单位毫秒）
运动逻辑写成 position += speed * (delta / 1000)，即按秒为单位的速度缩放

这样即使某帧卡顿 50ms，对象也不会“瞬移”，而是平滑补足该时段应走的距离。

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

三、绘制优化：只清必要区域 + 合理复用上下文

Canvas 性能瓶颈常出在绘制阶段：

避免全屏 clearRect(0, 0, width, height)，若背景静止或仅局部变化，用 save()/restore() 配合局部擦除或重绘
对静态元素（如 UI 背景、地图底图）预渲染到离屏 canvas，主画布只 composite（drawImage(offlineCanvas, ...)）
减少路径重建：缓存 Path2D 对象，重复使用；避免在动画循环中频繁调用 beginPath() + 大量 lineTo()