关键不是“少画”而是“少算”，应复用Path2D预建路径、闭包缓存动态参数、批量构建同类图形、离屏Canvas缓存静态内容，以降低高频重绘时的坐标运算开销。
关键不是“少画”，而是“少算”——路径生成的计算开销常被低估，尤其在高频重绘场景下。真正拖慢 Canvas 的，往往不是 drawImage 或 stroke 本身，而是每帧重复执行的坐标运算、弧度推导、顶点生成等逻辑。
用 Path2D 复用预构建路径
对固定形状（图标、刻度线、标准几何体），不要每帧调用 beginPath() + moveTo() + lineTo()；改用 Path2D 对象一次性构造，后续直接复用：
- 创建一次：
const star = new Path2D(); star.moveTo(...); star.lineTo(...); - 绘制多次：
ctx.stroke(star); ctx.fill(star); - 支持变换：
ctx.stroke(star, { transform: matrix });（现代浏览器已支持）
闭包缓存动态路径参数
当路径依赖 canvas 尺寸、缩放比或用户配置（如雷达图半径、饼图角度）时，用闭包封装计算逻辑，并只在参数变更时更新：
- 缓存顶点数组而非每次重算：
const getPolygonPoints = createPointCache(sides, radius); - 失效条件明确：仅当
canvas.width、devicePixelRatio或主题色变更时重建 - 配合 TypedArray（如 Float32Array）存储坐标，提升遍历与传参效率
批量构建 + 一次提交
避免为每个图形单独开路径。同类图形应合并路径指令，减少 beginPath() 和 fill()/stroke() 调用次数：
- 画 50 个圆？
ctx.beginPath(); for (let i=0; i<50; i++) ctx.arc(x[i], y[i], r, 0, Math.PI*2); ctx.fill(); - 画折线？
ctx.beginPath(); ctx.moveTo(pts[0].x, pts[0].y); pts.slice(1).forEach(p => ctx.lineTo(p.x, p.y)); ctx.stroke(); - 混合图形需分组：矩形一批、圆一批、文字一批，各自 beginPath()，不跨类型混用
离屏 Canvas 缓存静态路径
对不随帧变化的内容（背景网格、坐标轴、图例、带渐变的标题），提前绘制到离屏 canvas 中：
- 初始化时绘制一次：
offscreenCtx.fillStyle = gradient; offscreenCtx.fillRect(...); - 主循环只需：
ctx.drawImage(offscreenCanvas, 0, 0); - 缓存粒度按更新频率划分：全图静态 → 整个离屏 canvas；局部静态（如 Y 轴标签）→ 单独小离屏 canvas
不复杂但容易忽略。
