javascript - Canvas 中圆弧的不同 fillStyle 颜色

Question

我想这个问题的解决方案非常简单，如果这是非常明显的，请提前道歉，但我似乎无法弄清楚如何为两个不同的弧设置两个不同的 fillStyles ...我只是想能够绘制不同颜色的圆圈。下面我介绍了我通常如何在 Canvas 中使用其他形状/绘图方法来完成此操作，但由于某种原因，对于弧线，它将两个弧线设置为最后一个 fillStyle。

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();

Answer 1

我认为您缺少开始和结束路径语句。尝试以下操作(它在 jsfiddle 中对我有用， see here )

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

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