画布中弧的不同填充样式颜色答案

【问题标题】：different fillStyle colors for arc in canvas画布中弧的不同填充样式颜色
【发布时间】：2012-01-22 21:33:25
【问题描述】：

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

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

【问题讨论】：

标签： javascript canvas colors fill geometric-arc

【解决方案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();

【讨论】：

啊，当然！！！我认为这很明显。出于某种原因，我认为您只需要在绘制线条或曲线时才需要 begin/closePath，但我想这总是必要的 :) 非常感谢！

【解决方案2】：

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

【讨论】：

fillStyle 不是函数
哎呀！固定的。谢谢！

【解决方案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();

【讨论】：