Canvas绘制不同颜色圆形异常：两圆同色问题求助

哦，我太熟悉这个坑了！这是Canvas 2D上下文路径累积导致的典型问题——虽然你控制台里的颜色值确实在切换，但绘制逻辑里的路径处理让颜色被意外覆盖了。

问题根源 #

Canvas的2D上下文会持久化保存之前创建的路径，你的tegn方法里每次调用ctx.arc()时，都是在现有路径上添加新的圆弧，而不是重新创建一个独立的路径。

举个实际执行的流程：

• 第一次遍历绿色圆：路径里添加了绿色圆的圆弧，用green填充，此时显示正常。
• 接着遍历蓝色圆：路径里现在同时存在绿色圆和蓝色圆的圆弧，你设置fillStyle为blue并执行fill，这会把路径里的两个圆弧都填充成蓝色。
• 定时器每次循环都会重复这个过程，所以两个圆看起来永远是同一个颜色（最后一次设置的fillStyle）。

修复方案 #

只需要在绘制每个圆形之前，调用ctx.beginPath()来重置路径，这样每次绘制都只会针对当前的圆形，不会和之前的路径混淆。

修改后的tegn方法代码：

tegn() {
  ctx.beginPath(); // 关键：开启新路径，避免路径累积
  ctx.fillStyle = this.farge;
  ctx.arc(this.x, this.y, this.rad, 0, 2 * Math.PI);
  ctx.fill();
}

这样修改后，每个圆形都会在独立的路径上绘制，各自的fillStyle就能正确生效，你就能看到绿色和蓝色的两个圆正常显示了。

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