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

但是連接第一個和最后一個點真的很煩人（有時我想知道是誰創建了canvas元素，就像嵌入文本時一樣，但是不要讓我開始那個......）

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 。