离屏画布用于预绘制静态内容以提升性能，如背景、网格、图例等；应避免动态内容，合理控制数量与尺寸，并注意像素比同步和更新时机。
直接用主画布反复绘制复杂图案，容易卡顿——尤其当图形包含大量路径、渐变或频繁重绘时。离屏画布的核心价值，是把“耗时但不变”的部分提前画好，再快速复制到主画布，避免每帧重复计算和渲染。
哪些内容适合预先画在离屏画布上
静态背景、固定图例、坐标网格、文字标签、图标模板、预设装饰元素等不随动画或交互变化的部分，都属于“一次绘制、多次复用”的典型场景。
- 比如折线图中：Y轴刻度线、网格线、标题文字、图例框，这些几乎不会动，就该画在离屏画布里
- 游戏里：角色装备图标、技能冷却遮罩、UI面板底纹，也可离屏预绘，运行时只更新角色位置或血条数值
- 注意避开动态内容：鼠标轨迹、实时数据点、粒子效果等必须逐帧生成的，不适合放离屏画布
两种创建方式要分清用途
DOM 方式（document.createElement('canvas')）兼容性好，适合大多数页面场景；OffscreenCanvas API（new OffscreenCanvas(w, h)）支持 Web Worker 线程离线绘图，适合超复杂计算（如千级节点力导向图），但需检查浏览器支持（Chrome 69+、Firefox 69+、Edge 79+）。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 普通页面推荐 DOM 离屏画布：创建后设
display: none或不插入 DOM，手动设置宽高，获取 2D 上下文即可绘图 - 需要后台计算的，把绘图逻辑移入 Worker，用
transferToImageBitmap()把离屏结果高效传回主线程 - 别忘了同步像素比：若页面适配高清屏（
window.devicePixelRatio > 1），离屏画布的width/height也要乘以该值，否则导出模糊
主画布只做合成，不重绘
主画布每帧只需两步：清空动态区域 + drawImage() 贴入离屏画布内容 + 绘制真正变化的部分（如新数据点、拖拽中的图形）。
- 例如：先用
ctx.drawImage(offscreenCanvas, 0, 0)整体贴入静态层，再用ctx.beginPath()单独画当前帧的折线 - 避免在离屏画布上做
clearRect()后重绘——它失去“预绘制”意义；离屏画布应视为只读缓存，内容变更时才重建 - 多个离屏画布可分工：一个存背景，一个存图例，一个存坐标系，按需组合调用，比单一大画布更灵活
内存与更新节奏要平衡
离屏画布不是越多越好。每个离屏画布占用独立显存，过多会增加内存压力；更新太频繁则抵消性能收益。
- 建议阈值：单个离屏画布尺寸不超过主画布 2 倍（如主画布 800×600，离屏建议 ≤1600×1200），避免过度放大失真或内存溢出
- 更新时机看变化频率：图例文字改了才重建图例离屏画布；坐标范围缩放时才重建网格离屏画布
- 用
console.time()对比关键路径：记录“纯离屏绘制耗时”和“主画布整帧耗时”，验证是否真有提升
