HTML Canvas在两点之间绘制弧

Question

我发现了类似的问题，但没有答案。我画了一个像这样的圆圈

ctx.strokeStyle='rgb(0,0,0)';
ctx.lineWidth=10;
ctx.beginPath();
ctx.arc(100,100,45,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();

给出一个位于（100,100）的半径为45的圆，加上5为线宽，使其成为半径为50的圆。现在，我想绘制完全相同的圆，但是另一种颜色，只有1/4原始的环绕（想想XBOX 360红色的厄运之环）。所以我尝试了这个

ctx.strokeStyle='rgb(0,250,0)';
ctx.lineWidth=10;
ctx.beginPath();
ctx.arc(100,100,45,0,Math.PI/2,true);    //use 1/4 of original angle
ctx.closePath();
ctx.stroke();

但是这有连接第一个和最后一个点的烦人方面（有时我想知道是谁创建了canvas元素，就像嵌入文本时一样，但是不要让我开始那个......）

Answer 1

我已经注释掉了你不想要的那条线。通过调用closePath()，您将关闭弧的路径。

实施例

的JavaScript

ctx.strokeStyle='rgb(0,250,0)';
ctx.lineWidth=10;
ctx.beginPath();
ctx.arc(100,100,45,0,Math.PI/2,true);    //use 1/4 of original angle
//ctx.closePath();
ctx.stroke();

jsFiddle