离屏canvas缓存需同时满足内容长期不变且单次绘制开销明显高于drawimage，适合静态ui、固定图元等场景；盲目使用反增内存压力与同步成本。
图形缓存不是“画一次存着用”，而是让重复绘制的开销真正被跳过。关键在于识别哪些内容值得缓存、怎么存才不拖慢整体渲染。
什么该缓存？看两个硬条件
只有同时满足以下两点，才适合用离屏 Canvas 缓存：
- 图形内容长期不变——比如按钮图标、坐标网格、固定图例、带阴影和渐变的 UI 模板
- 单次绘制成本明显高于 drawImage——例如每帧要调用几十次 strokeText + fillRect + addPath，而缓存后只需 1 次 drawImage
如果图形每帧都在动（如粒子轨迹、实时折线），缓存反而多占内存、多做同步，可能更卡。
怎么创建和复用离屏画布？别每次都新建
缓存的价值不在“建”，而在“复用”。常见误区是每次重绘都 new 一个 OffscreenCanvas，这等于没缓存。
- 优先用 OffscreenCanvas(width, height) 构造函数（现代浏览器支持），不用 document.createElement('canvas') 模拟
- 宽高必须显式设置，不能靠 CSS 缩放，否则渲染为空白
- 只在内容真变了（比如主题切换、字体调整）才重绘离屏画布，用 dirty 标志控制
- 多层结构可分层缓存——底图层静态就缓存，标注层偶尔更新就单独刷新
drawImage 贴图时要注意啥？
从离屏画布贴到主画布，不是简单一贴了事：
- 离屏上下文不继承主画布状态，每次使用前得重设 font、fillStyle、lineWidth 等
- 避免在循环里反复设相同样式，可封装成预设配置函数
- 注意 imageSmoothingEnabled 设置，缩放时影响清晰度；坐标和缩放比例要对齐主画布逻辑
局部重绘配合缓存更高效
静态内容缓存后，动态部分才能真正轻量刷新：
- 用 clearRect 精确擦除变化区域，别全画布清空再重画
- 多个小变动区域尽量合并为一个包围矩形，一次清除
- 脏区计算要整数对齐（Math.floor），防 sub-pixel 引发抗锯齿异常
- 若动态区域叠加在静态背景上，先 drawImage 对应区域覆盖旧像素，再绘制新元素
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
