离屏 Canvas 是不插入 DOM 的 canvas 元素，用作图形缓存容器；适用于静态/低频变化、复杂路径、高频复用及固定变换的图形，通过预绘制+drawImage 复用提升性能。
用离屏 Canvas 预先绘制复杂图形，能显著减少主画布每帧的重绘开销——核心思路是“一次绘制，多次复用”，把耗时的路径构造、样式设置、填充描边等操作提前完成，运行时只做轻量的 drawImage 调用。
什么是离屏 Canvas
离屏 Canvas 是一个不插入 DOM 的 <canvas> 元素，仅用于绘图上下文操作。它没有视觉输出，但拥有完整的 2D 渲染能力，可作为“图形缓存容器”使用。
创建方式简单：
const offscreen = document.createElement('canvas');offscreen.width = 200;
offscreen.height = 150;
const offCtx = offscreen.getContext('2d');
何时适合用离屏 Canvas 缓存
适用于以下几类图形：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
立即学习“Java免费学习笔记（深入）”；
- 静态或极少变化的复合图形（如角色精灵、UI 图标、装饰性徽章）
- 含多段路径、渐变、阴影或文字的图形（避免每帧重复构建路径）
- 需高频重复绘制的相同图形（如粒子系统中的基础粒子形状）
- 缩放/旋转固定、但位置常变的图形（缓存后用
drawImage+ 变换参数高效复用）
具体实现步骤
以绘制一个带渐变圆角矩形图标为例：
- 预绘制到离屏 Canvas：在初始化阶段执行一次
const gradient = offCtx.createLinearGradient(0, 0, offscreen.width, offscreen.height);
gradient.addColorStop(0, '#4a90e2');
gradient.addColorStop(1, '#50e3c2');
offCtx.fillStyle = gradient;
offCtx.beginPath();
offCtx.roundRect(20, 20, 160, 110, 12); // 圆角矩形
offCtx.fill();
- 主动画循环中直接复用：每帧只需调用
注意：若需缩放或旋转，推荐用 ctx.setTransform() 或 ctx.drawImage() 的九参数版本，避免影响主画布状态。
关键注意事项
避免缓存失效和性能反效果：
- 缓存尺寸不宜过大——离屏 Canvas 占用内存，建议按实际使用区域裁剪，而非全屏预留
- 不要为每个微小变化（如颜色、大小浮动）都建新离屏 Canvas；可提取变量参数，在主画布上动态调整后再缓存
- 若图形需频繁更新（如每帧都变），离屏缓存反而增加拷贝开销，此时应改用脏矩形局部重绘或分层策略
- 移动端注意内存限制，可结合
canvas.toDataURL()或createImageBitmap()进一步优化纹理上传
