离屏canvas快照是缓存静态背景最轻量、兼容性最好、见效最快的方式，通过一次性绘制到隐藏canvas并复用drawimage实现高效贴图，配合分层与createimagebitmap可进一步提升性能。
直接用离屏Canvas生成位图快照，是缓存静态背景最轻量、兼容性最好、见效最快的方式。它不依赖WebGL或现代API，所有主流浏览器都支持，且能避开90%以上的重绘开销。
用离屏Canvas做一次性快照
静态背景（比如地图底图、UI网格、渐变背景）画一次就够了，没必要每帧重算路径或填充颜色。核心就是：提前画进一个看不见的canvas里，后续只管“贴图”。
- 创建离屏Canvas：不用加到DOM，纯JS创建即可——
const offscreen = document.createElement('canvas') - 设好宽高（必须与主画布一致，否则缩放会拖慢性能）
- 获取2D上下文，把所有静态内容一次性绘制完成（fillRect、drawImage、甚至复杂路径）
- 主循环中只需
ctx.drawImage(offscreen, 0, 0)——这步本质是GPU纹理复制，比重绘快5倍以上
避免常见快照陷阱
快照本身很快，但用错了反而更卡。关键不是“做了没”，而是“怎么存、怎么用”。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 别在动画循环里反复创建离屏Canvas——初始化阶段建好，复用同一个实例
- 不要动态读取
ctx.canvas.width或getBoundingClientRect()来算尺寸，这些会触发强制同步布局 - 如果背景需缩放或旋转，优先用
setTransform()预设变换矩阵，而不是靠drawImage参数实时计算 - 多分辨率适配时，按设备像素比（devicePixelRatio）生成对应尺寸的离屏Canvas，避免浏览器插值缩放
配合分层进一步省力
快照只是第一步；把它放进分层结构，才能真正释放性能红利。
- 底层Canvas：放离屏快照，只在数据变更时重建（比如切换地图主题）
- 中层Canvas：放半静态内容（如坐标轴、图例），变化少，可按需局部重绘
- 顶层Canvas：只画高频动画元素（粒子、角色），清空+重绘范围最小化
- 各层用
position: absolute叠在一起，z-index控制层级，CSS不参与渲染逻辑
需要更高性能？试试createImageBitmap
当静态内容特别大（比如10万+矢量图标拼成的底图），普通drawImage仍有内存拷贝开销。此时可升级为硬件纹理缓存：
- 用
createImageBitmap(offscreen)把离屏Canvas转为GPU纹理 - 后续用
ctx.transferFromImageBitmap(bitmap)实现零拷贝贴图 - 注意：Chrome/Firefox支持良好；Safari需iOS 16.4+/macOS 13.3+，旧版本自动fallback到drawImage
- 启用前确认
willReadFrequently: false，否则无法启用GPU加速
