离屏 Canvas 裁剪缓存的核心是“一次绘制、多次复用、按需裁剪”，适用于图标集、UI 组件库等场景；通过预绘制小图到固定尺寸离屏画布，记录坐标映射表，运行时用 drawImage 精确截取复用，并注意分辨率对齐、坐标系一致、跨域限制等细节。
离屏 Canvas 裁剪并缓存静态图片片段，核心是“一次绘制、多次复用、按需裁剪”，特别适合图标集、UI 组件库、地图瓦片、字体图谱等含大量重复小图的场景。关键不在画得多，而在画得准、存得稳、取得快。
提前切图 + 合并入一张离屏画布
把多个小图（如 16×16 图标、24×24 按钮、带阴影的文字模板）按网格或自定义布局，一次性绘制到一张尺寸固定的离屏 canvas 中：
- 用 OffscreenCanvas（支持环境下）或普通 canvas 元素 display:none 创建缓存画布
- 设定合理尺寸，例如 512×512 或 1024×1024，避免过大浪费内存，也防止过小导致频繁缩放失真
- 记录每个片段的坐标与尺寸：{ id: 'search-icon', x: 0, y: 0, width: 24, height: 24 }
- 不逐个创建新 canvas，统一管理一张离屏画布 + 一个坐标映射表
运行时按坐标裁剪复用
渲染时不再重绘原始图形，而是从离屏画布中精确截取对应区域，用 drawImage 贴到主 canvas：
- 调用
ctx.drawImage(offscreenCanvas, srcX, srcY, srcW, srcH, dstX, dstY, dstW, dstH) - src 参数取自预存坐标，dst 参数为实际显示位置和尺寸（可等比缩放）
- 若需旋转/滤镜等效果，优先在离屏阶段预处理完成，避免每帧计算
- 禁用抗锯齿（
ctx.imageSmoothingEnabled = false）提升小图清晰度与性能
配合精灵图思路做动态调度
类似传统游戏精灵图（Sprite Sheet），但更灵活——支持运行时动态索引与局部更新：
立即学习“前端免费学习笔记（深入）”；
- 用 Map 或对象缓存所有片段元数据，支持 ID 查找：
spriteMap.get('close-btn') - 某图标内容更新时，只重绘离屏画布中对应区域（
offscreenCtx.clearRect(x,y,w,h)+ 重绘），不影响其他片段 - 高频切换的几组图标（如深色/浅色主题）可维护多张离屏画布，按主题切换 drawImage 源
- 闲置超时或内存紧张时，可主动释放离屏 canvas：
offscreenCanvas.width = offscreenCanvas.height = 0
注意边界与适配细节
离屏缓存不是一劳永逸，几个易错点直接影响效果：
-
分辨率对齐：离屏 canvas 尺寸需乘以
window.devicePixelRatio，否则高 DPI 屏上模糊 - 坐标系一致：确保离屏绘制与主 canvas 使用相同坐标原点、缩放逻辑，避免偏移
-
避免跨域限制：图片需同源或设置
crossOrigin="anonymous"，否则无法读写像素或触发安全异常 -
首次加载延迟可控：离屏绘制放在空闲时段（
requestIdleCallback）或初始化阶段，不阻塞首屏
