为何Canvas API在循环内绘制路径时出现填充颜色异常问题

核心原理：Canvas路径的持久化特性 #

Canvas 2D上下文的路径是全局持久累积的，遵循以下规则：

• 所有路径绘制API（rect()/moveTo()/lineTo()等）都会将图形追加到当前全局路径列表，不会自动清空
• fill()/stroke()仅执行渲染动作，不会清空已累积的路径
• 只有主动调用beginPath()才会清空当前所有路径，开启新的绘制周期

原始代码错误流程拆解 #

你的代码异常完全是路径累积导致的，执行逻辑如下：

1. 第1个单元格绘制：
   • 调用ctx.rect()将当前单元格绿色矩形加入路径 → 路径列表：[矩形1]
   • ctx.fill()用绿色填充所有路径，矩形1显示正常
   • 调用ctx.beginPath()清空路径，绘制黑色端口路径 → 路径列表：[端口1]
   • ctx.fill()填充黑色，端口1显示正常
   • 重点：fill()不会清空路径，此时路径列表仍保留[端口1]
2. 第2个单元格绘制：
   • 调用ctx.rect()将当前矩形加入路径 → 路径列表变成：[端口1, 矩形2]
   • ctx.fill()用绿色填充所有路径：不仅把矩形2填成绿色，还把上一个单元格的端口1重新覆盖成绿色
   • 后续绘制端口2正常，但端口1已经被覆盖消失
3. 以此类推，每一轮循环的绿色填充都会覆盖上一轮的黑色端口，只有最后一轮循环的端口不会被后续的绿色填充覆盖，所以仅右下角最后一个单元格显示正常。

修复方案的逻辑说明 #

• 注释绿色绘制代码后，没有跨循环的绿色填充动作覆盖之前的端口，所有端口都能正常显示
• 在绘制绿色矩形前加ctx.beginPath()，会在每轮循环开始时清空上一轮残留的端口路径，绿色填充只会作用于当前矩形，不会覆盖之前的端口，自然就符合预期。

内容的提问来源于stack exchange，提问作者pooley1994