如何通过Canvas流水线优化在HTML5中减少大规模图形绘制的CPU消耗？

本文共计633个文字，预计阅读时间需要3分钟。

Canvas渲染大模型图形时，CPU占用高，核心原因在于：

批量合并绘制指令，削减上下文开销

Canvas API 每次设置 `fillStyle`、调用 `beginPath()` 或 `fill()` 都有固定 CPU 开销。单个圆点看似轻量，但 5000 个不同颜色的圆逐个绘制，就等于执行 5000 次状态切换 + 5000 次 fill。

• 将图形按样式（颜色、线宽、透明度）分组，每组只做一次 ctx.fillStyle = ... 和一次 ctx.fill()
• 同一组内复用路径：ctx.beginPath() → 循环 ctx.arc(x, y, r, 0, PI2) → ctx.fill()
• 避免在循环中反复读写 ctx 属性（如 ctx.globalAlpha），改用离线计算后统一设置

用空间索引替代全量遍历

即使加了脏矩形，每帧仍需遍历全部对象判断是否在视口内——这是 O(N) 的 CPU 热点。

• 引入四叉树或网格哈希（Grid Hash），把坐标映射到二维桶中
• 渲染前仅查询与当前视口相交的几个桶，获取候选对象列表（通常 < 5% 总数）
• 动态对象需在移动时主动更新其在索引中的位置，而非每帧重建整棵树

分层+离屏缓存，复用静态内容

背景、UI、地图格子等不常变动的内容，反复重绘是 CPU 浪费。

• 创建多个 <canvas> 元素，按动静分离：background-canvas、game-canvas、ui-canvas
• 对静态层启用离屏缓存：先绘制到 OffscreenCanvas，再用 drawImage() 一次性贴图到主画布
• 若某层内容长期不变，可将其转为 ImageBitmap，进一步减少像素拷贝开销

将计算密集型任务移出主线程

粒子生成、路径变形、坐标投影等纯数学运算，不应阻塞渲染和交互。

• 使用 Web Worker 处理数据准备（如顶点坐标批量计算、缩放后坐标映射）
• 主线程通过 OffscreenCanvas.transferControlToOffscreen() 获取离屏画布句柄，传给 Worker
• Worker 完成绘制后，主线程直接合成结果，避免 getImageData/putImageData 的内存复制

不复杂但容易忽略