我在那里发现了类似的问题,但没有答案。我画了一个这样的圆圈
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 元素,就像嵌入文本时一样,但不要让我开始......)
最佳答案
我已经把你不想要的那一行注释掉了。通过调用 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 .
关于javascript - HTML Canvas 在两点之间绘制圆弧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5439462/