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

但这有一个非常烦人的方面，即连接第一个点和最后一个点（有时我想知道是谁创建了画布元素，比如嵌入文本时，但不要让我开始……）

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.