html一个元素画两个圆弧,javascript – HTML Canvas在两点之间绘制弧线

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

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

标签：javascript,canvas,circle,html,geometric-arc

来源： https://codeday.me/bug/20190614/1237665.html