Javascript 画布中圆弧的不同填充样式颜色

我想解决这个问题的方法很简单，如果这是显而易见的，请提前道歉，但我似乎不知道如何为两个不同的圆弧设置两种不同的填充样式…我只想能够绘制不同的颜色圆。下面是我通常如何在画布中使用其他形状/绘图方法，但由于某些原因，使用圆弧时，它会将两个圆弧都设置为最后一个填充样式

ctx.fillStyle = "#c82124"; //red
ctx.arc(15,15,15,0,Math.PI*2,true);
ctx.fill();

ctx.fillStyle = "#3370d4"; //blue
ctx.arc(580,15,15,0,Math.PI*2,true);
ctx.fill();

---

我认为您缺少开始和结束路径语句。尝试下面的方法（在jsfiddle中对我很有效，）

---

请注意，路径只是几何图形。您可以随时设置

.fillStyle

，直到

fill（）

我用

beginPath（）

函数尝试了它，它成功了。 我希望这些对您有用：-

ctx.fillStyle = "#c82124"; //red
ctx.beginPath();
ctx.arc(15,15,15,0,Math.PI*2,true);
ctx.fill();
ctx.fillStyle = "#3370d4"; //blue
ctx.beginPath();
ctx.arc(580,15,15,0,Math.PI*2,true);
ctx.fill();

---

啊，当然啦！！！我想这是很明显的事情。出于某种原因，我以为在绘制直线或曲线时只需要开始/关闭路径，但我想这总是必要的：）太多了<代码>填充样式不是函数哦！固定的。谢谢

ctx.fillStyle = "#c82124"; //red
ctx.beginPath();
ctx.arc(15,15,15,0,Math.PI*2,true);
ctx.fill();
ctx.fillStyle = "#3370d4"; //blue
ctx.beginPath();
ctx.arc(580,15,15,0,Math.PI*2,true);
ctx.fill();