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

这个代码画了一个半径为45，线宽为5，圆心坐标为(100,100)的圆。现在，我想画一个完全相同的圆，但是颜色不同，并且只有原来周长的四分之一（类似于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元素，尤其是在嵌入文本时，但不要让我开始说这个...）

- puk

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.

- alex

---

很容易做到，但我仍然觉得canvas有时候对我来说似乎不太合逻辑 :) - alex