为画布绘制的弧填充颜色

Question

我正在尝试为圆弧填充颜色。但是，我不想使用ctx.lineWidth来做到这一点。

我尝试绘制它here。请教我如何为它填充颜色。

Answer 1

如果您不想使用线宽，则需要定义一条连续路径，以便能够用单一颜色填充。

使用两个弧意味着您需要“反转”其中一个，以便它们的端点正确连接而不会交叉。您可以使用结尾设置为true的反向关闭标志并交换开始和结束角度来执行此操作：

ctx.arc(W/2, H, H-40, 2*Math.PI, Math.PI, true);  // CCW, swapped angles
ctx.arc(W/2, H, H, Math.PI, 2*Math.PI);
ctx.fill();                                       // now it can be filled

<强> Updated fiddle