4

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

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

但这具有连接第一个点和最后一个点的真正烦人的方面(有时我想知道是谁创建了画布元素,例如嵌入文本时,但不要让我开始...)

4

1 回答 1

7

我已经注释掉了你不想要的那行。通过调用closePath(),您正在关闭弧的路径。

例子

3/4 弧线

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

js小提琴

于 2011-03-26T00:21:59.847 回答