canvas性能优化核心是减少重绘频率和批处理绘制：局部清除变化区域、批量路径一次性填充/描边、分层隔离动静内容、缓存静态元素至离屏canvas复用。
减少重绘频率和批处理绘制是Canvas性能提升最直接有效的两个抓手。关键不在“多画”，而在“画得准、画得省”——只更新该变的，合并能一起画的。
只清局部，不刷全画布
每次调用 clearRect(0, 0, width, height) 都会清空整个像素区域，对大画布尤其耗时。实际中多数动画只改一小块内容，比如一个移动的小球、某条折线的最新点。
- 记录变化区域坐标（x, y, w, h），用
clearRect(x, y, w, h)精确擦除旧位置 - 再在同一区域绘制新内容，避免影响其他静止元素
- 对多个分散变化项，可合并为一个包围矩形再清除，减少 clearRect 调用次数
批量路径，一次填充或描边
每调用一次 beginPath() + arc() + fill() 就是一次独立绘制指令，开销叠加明显。把同类图形集中处理，能大幅降低API调用负担。
- 画多个圆：统一
beginPath()，循环添加arc()，最后单次fill() - 画多条线段：用
moveTo()和lineTo()连续构建路径，一次stroke() - 避免在循环内反复设置
fillStyle或strokeStyle，相同样式图形尽量归为一批
分层隔离，动静分离
把画布内容按更新频率拆到不同Canvas层上，让静态层完全不参与每帧重绘。
- 底层 Canvas：背景图、网格线、坐标轴——初始化后不再重绘
- 中层 Canvas：标签、图例等低频更新元素——按需局部重绘
- 顶层 Canvas：动画对象、实时数据点——仅在此层做高频更新
- 各层用
position: absolute叠加，共享同一容器尺寸
缓存不变内容，复用离屏画布
图标、文字、复杂装饰图形若不常变，反复计算路径+填充很浪费。提前画进离屏Canvas，后续当作图片贴过去。
- 创建离屏Canvas：
const offscreen = document.createElement('canvas') - 在其2D上下文中一次性绘制静态内容
- 主画布中用
drawImage(offscreen, x, y)快速合成，无路径重建开销 - 适合按钮、标题、带阴影的文字等“绘完即固化”的元素
