HTML5 Canvas 基礎(四) 畫直線與弧線

要在 canvas 上繪製線條，可以透過 beginPath() 開始，以 moveTo() 設定起點，接著用 lineTo() 設定接著要連線的點，然後就可以像連連看一樣把線條繪製出來了。

context.beginPath();   
context.moveTo(100,150);  
context.lineTo(250,75);    
context.lineTo(125,30); 

設定完連線後要設定線條的樣式和顏色如下：

context.strokeStyle = '#0000ff';
context.lineWidth="2";

接著再使用 .stroke() 把線條完成就可以了，如果要讓線條封閉可以加設定 closePath()，若沒有設定 closePath() 直接把線條連回起點，可能會發生線條不連續的現象要特別注意，完成如下：

在線條上還可以透過 lineCap 來設定線條端點的樣式，可以設定的值為 butt(default), square 和 round，要設定轉折點的樣式則是透過 lineJoin，可以設定的值為 miter(default), round 和 bevel，可以在繪製的時候設定看看。

要繪製弧形的話則是透過 .arc 來處理，完整的參數如下：
context.arc(x, y, radius, startAngle, endAngle, direction)

• x,y  圓心座標
• radius 半徑
• startAngle及endAngle表示
起末弧度，x軸為準
• direction 若為true表示往逆時鐘
繪製弧形

其中 startAngle 與 endAngle 會與圓的設定角度有關，可以參考下圖：

我們就可以透過 arc 來繪製弧形，注意如果要繪製扇形到話，要把圓心也點上去不然會只出現弧形內的形狀而已。

要畫圓形只要把弧形填滿圓就可以了。