多 Canvas 同步渲染需统一用单个 requestAnimationFrame 驱动所有画布，共享同一帧时间戳，按 Z 序分层绘制，并避免布局触发与合成异常。
JavaScript 事件循环本身不直接“处理”多 Canvas 渲染同步，它只是调度任务的机制；真正实现多 Canvas 同步渲染的关键，在于统一使用 requestAnimationFrame（rAF）驱动所有画布，并确保它们共享同一帧节奏、避免各自用 setTimeout 或不同 rAF 链导致错帧。
✅ 共享一个主 rAF 循环
多个 Canvas 应由同一个 requestAnimationFrame 回调驱动，而不是每个 Canvas 单独启动一个 rAF。这样可保证所有绘制操作发生在同一帧内，与屏幕刷新率严格对齐。
- 浏览器每帧只触发一次 rAF 回调，你在其中依次调用各 Canvas 的
render()方法，逻辑上就是“同步”的 - 若为每个 Canvas 写
requestAnimationFrame(renderCanvas1)和requestAnimationFrame(renderCanvas2)，看似并行，实则可能被调度到相邻帧（尤其在高负载时），造成视觉错位 - 示例结构：
function mainLoop() {
canvases.forEach(renderToCanvas); // 统一更新+绘制
requestAnimationFrame(mainLoop);
}
mainLoop();
✅ 绘制顺序与图层控制
多 Canvas 常用于分层渲染（如：背景层、角色层、UI 层），这时需明确绘制顺序和上下文状态管理，避免相互污染。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 按 Z 轴顺序从后往前绘制（先 background，再 game，最后 hud），否则会遮盖
- 每个 Canvas 的
ctx独立，但注意不要在不同 Canvas 间混用同一个ctx.save()/restore()栈 - 若某层需频繁重绘而其他层静止，可在主循环中加条件判断，跳过未变更层的
clearRect和重绘，节省 GPU 负载
✅ 避免跨 Canvas 的时间偏差
当 Canvas 内容依赖时间（如动画进度、物理模拟），必须使用统一的时间戳，而非各自 Date.now() 或不同 rAF 的 timestamp 参数。
立即学习“Java免费学习笔记（深入）”；
- rAF 回调接收一个高精度时间戳（DOMHighResTimeStamp），应将其作为全局
currentTime传入所有渲染逻辑 - 错误做法：每个 Canvas 自己调用
Date.now()→ 微秒级偏差累积后，动画节奏 visibly 不一致 - 正确做法：
const dt = timestamp - lastTime;
lastTime = timestamp;
updateAllLogic(dt); // 统一更新状态
renderToCanvas1(ctx1, timestamp);
renderToCanvas2(ctx2, timestamp);
requestAnimationFrame(mainLoop);
}
✅ 注意合成与布局影响
多个 Canvas 若在 DOM 中位置重叠或有 CSS transform/opacity，浏览器可能启用图层合成（compositing）。此时即使 JS 渲染同步，视觉仍可能因合成时机不一致而闪烁或拖影。
- 给每个 Canvas 添加
will-change: transform或contain: strict可提示浏览器提前创建独立合成层 - 避免在 rAF 中同时修改 Canvas 尺寸 + 绘制 —— 这会触发回流（layout），打断渲染流水线，导致掉帧
- 检查 DevTools > Rendering > “FPS Meter” 和 “Layer Borders”，确认是否意外产生过多合成层
