合并绘制任务是提升Canvas性能最直接有效的方式之一，包括批量路径绘制、按样式分组绘制、复用离屏Canvas缓存静态内容及局部更新代替全屏重绘。
合并绘制任务是提升Canvas性能最直接有效的方式之一。核心在于减少对绘图上下文（ctx）的重复调用和状态切换——每次设置 fillStyle、lineWidth 或调用 fillRect() 都会触发内部状态同步，频繁操作会显著拖慢渲染帧率。
批量路径绘制：一次 beginPath，多次 moveTo/lineTo
绘制多个形状时，避免为每个图形单独调用 beginPath() → fill()。应统一构建路径，再集中填充或描边：
- 矩形用
rect()替代四次lineTo()，更轻量 - 多个圆点可用单个
beginPath()+ 循环arc()+ 一次fill() - 折线或不规则图形优先用
moveTo()和lineTo()连成一条路径，而非拆成多段
按样式分组绘制：减少 fillStyle/strokeStyle 切换
不同颜色或线宽的图形混合绘制时，上下文状态反复变更开销很大。建议先归类再批量处理：
- 遍历数据，把相同
fillStyle的图形坐标收集到一个数组 - 设置一次样式，再循环绘制该组所有图形
- 例如：柱状图中红色柱子一组、蓝色柱子一组，分别设置颜色并批量填充
复用离屏Canvas缓存静态内容
对不随帧变化的元素（如图标、背景纹理、文字标签），提前画到 OffscreenCanvas 或内存 Canvas 中：
- 避免每帧重复计算路径或文本布局
- 主画布只需
drawImage(offlineCanvas, x, y)合成，开销远低于重绘 - 特别适合 UI 组件、固定图例、带阴影的文字等“半静态”内容
局部更新代替全屏重绘
不需要清空整块画布再重画全部内容。可精准控制更新区域：
- 用
clearRect(x, y, width, height)只擦除变动区域 - 配合脏矩形（dirty rectangle）机制，记录上一帧哪些位置发生了变化
- 动画中仅重绘移动对象的新旧位置交集区，其余部分复用前帧图像
