javascript - 画布中弧的不同填充样式颜色

Question

我想解决这个问题很简单，如果这很明显，请提前道歉，但我似乎无法弄清楚如何为两个不同的弧线设置两个不同的填充样式......我只是想能够绘制不同的色环。下面我介绍了我通常如何在画布中使用其他形状/绘图方法进行操作，但由于某种原因，对于弧线，它将两条弧线都设置为最后一个填充样式。

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 中对我有用，请参见此处）

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

Answer 2

请注意，路径只是几何图形。您可以.fillStyle随时设置，直到fill( ).

Answer 3

我用这个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();