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

我想解决这个问题的方法很简单，如果这很明显就提前道歉，但是我似乎无法弄清楚如何为两个不同的弧线设置两个不同的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();

最佳答案

我认为您缺少开始和结束路径语句。尝试以下操作(它在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();

关于javascript - Canvas 中弧线的不同fillStyle颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8549725/