必须每次绘图前调用ctx.beginPath()重置路径状态，避免路径粘连和性能损耗；应批量构建路径后一次性绘制，并用closePath()明确收尾以优化渲染效率。
关键在于每次绘图前主动重置路径状态，而不是依赖清除像素来“掩盖”上下文残留。很多性能问题其实不是画得慢，而是画错了——路径意外连接、重复定义、隐式延续，导致渲染逻辑混乱、CPU开销上升、甚至视觉异常。
必须调用 ctx.beginPath() 的真实原因
Canvas 绘图上下文（ctx）维护一个内部路径栈，clearRect() 只清像素，不重置路径。如果漏掉 beginPath()，后续的 moveTo() 或 lineTo() 会从上一次路径的终点继续画起，造成“路径粘连”。这不仅产生视觉错误，还会让浏览器持续维护冗余路径数据，增加内存和计算负担。
- 每次动态更新图形前，先调用 ctx.beginPath()，确保路径从零开始
- 即使只画一条线或一个矩形，也要显式 beginPath() —— 不要假设“简单图形不需要”
- 避免在循环中反复调用 beginPath() + stroke()/fill() 绘制单个图形；应合并为一个路径再批量绘制
批量路径构建：减少 beginPath() 调用频次
高频调用 beginPath() 本身虽轻量，但若配合大量独立 fill()/stroke()，会触发多次渲染提交，拖慢性能。真正高效的做法是：一次 beginPath()，多次路径指令，一次绘制。
- 绘制 100 个圆？用一个 beginPath() + 100 次 arc() + 一次 fill()
- 绘制折线图？moveTo 起点后，连续 lineTo 所有点，最后 stroke()
- 混合图形（矩形+圆+文字）需分组：每类图形各自 beginPath() + 批量绘制，避免跨类型路径污染
缓存路径指令，而非重复构造
对参数固定或变化有限的图形（如图标、刻度线、网格），可将路径生成逻辑封装为函数，并用闭包缓存其坐标计算结果。这样每次重绘时跳过数学运算，直接复用路径点数组或预编译的绘图指令。
- 例如：雷达图的轴线位置只需在尺寸变更时重新计算，其余帧直接复用
- 结合 TypedArray 存储顶点（如 Float32Array），比普通数组更快遍历和传入路径方法
- 注意缓存失效：canvas.width/height 改变、缩放比例更新、主题色切换等，都需触发路径重建
用 closePath() 明确收尾，防止隐式连接
未闭合的路径可能被浏览器自动补线，或与后续路径意外衔接。显式调用 closePath() 不仅语义清晰，还能帮助渲染引擎更早释放路径中间状态，降低内存驻留压力。
- 绘制封闭图形（多边形、饼图扇形）务必以 closePath() 结束
- 即使视觉上无需闭合，也建议在逻辑路径结束时 closePath()，避免 ctx 内部状态持续挂起
- 与 beginPath() 配合，形成“开始–构建–闭合–绘制”的完整路径生命周期
