Canvas 绘制高性能动画：requestAnimationFrame 的调度循环-H5教程-PHP中文网

正确做法是绘制完成后才调用requestanimationframe(animate)，确保每帧仅申请一次下一帧；单帧逻辑须控制在16ms内，避免重复创建对象、全屏清除及未预加载图片；raf天然支持页面不可见时暂停，无需手动监听visibilitychange。

canvas 绘制高性能动画：requestanimationframe 的调度循环

用 requestAnimationFrame 实现 Canvas 动画，关键不在“调用它”，而在于让整个调度循环真正匹配浏览器的渲染节奏——不抢帧、不漏帧、不堆帧。

动画循环必须由浏览器主导，不能自我递归触发

常见错误是把 requestAnimationFrame 写在更新逻辑内部，比如：

在 update() 函数开头就调用 requestAnimationFrame(update)
导致一帧还没结束，下一帧请求已发出，形成不可控的嵌套调用链
动画帧序混乱，尤其在计算耗时或资源加载延迟时，容易跳帧甚至卡死

正确做法是只在绘制完成后再申请下一帧，且仅一次：

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

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

下载

function animate() {
  update();     // 更新状态（位置、颜色等）
  render();     // 清除 + 绘制
  requestAnimationFrame(animate); // 唯一且明确的下一帧请求
}
requestAnimationFrame(animate); // 启动入口，只调用一次

单帧逻辑必须守住 16ms 预算（60fps）

rAF 不是性能加速器，它只是准时发号施令；真正在帧里干了什么，才决定是否掉帧。

避免每帧全屏 clearRect：大尺寸 Canvas 或高 DPI 屏幕下开销巨大，改用“脏矩形”局部清除
别在循环里重复创建对象：如 new Path2D()、ctx.createLinearGradient()，应在初始化阶段创建并复用
图片资源必须预加载完成再绘图：img.onload 确保 drawImage 不触发同步解码
静态元素优先离屏缓存：背景、图标等先画到离屏 <canvas></canvas>，再用 drawImage 整块贴上

利用浏览器原生节流机制，不手动干预可见性

rAF 天然支持页面不可见时暂停回调，这是 setTimeout 无法替代的核心优势。

标签页切走、Canvas 元素隐藏、设备省电模式下，rAF 自动降频或暂停，CPU 占用趋近于零
无需监听 visibilitychange 手动开关动画——除非需要降级兜底（如老旧 Android WebView）
若发现动画仍在后台运行，大概率是误用了定时器或未清理其他异步任务（如未取消的 setTimeout）

调试帧耗时，用 `performance.now()` 替代主观感知

卡顿不能靠眼睛判断，得看真实帧间隔和单帧耗时。

记录上一帧开始时间，当前帧内计算差值：const delta = performance.now() - lastTime; lastTime = performance.now();
若多数帧 > 16ms，说明逻辑超载；若帧间隔突然拉长（如 48ms），可能是浏览器主动降频
配合 Chrome DevTools 的 Performance 面板，可定位具体哪行 JS 或绘图操作拖慢了帧