3.2 繪制簡單圖形

canvas元素本身并不能實現圖形繪制，需要和JavaScript腳本結合起來。首先，給canvas元素添加一個id屬性，在JavaScript腳本中通過id屬性尋找對應的canvas元素。然后通過canvas元素的getContext()方法獲取其上下文，即創建Context對象，以獲取允許進行繪制的2D環境。最后通過Context對象的相關方法完成繪制，例如fillStyle()方法、fillRect()方法等。

進行繪制時，需要指定確定的坐標位置，坐標原點(0, 0)位于canvas的左上角，x軸水平方向向右延伸，y軸垂直向下延伸，如圖3-2所示。

3.2.1 繪制直線

Context對象的moveTo(x, y)方法是將畫筆移動到指定的坐標點(x, y)，lineTo(x, y)方法是從落筆點繪制路徑到坐標點(x, y)。只使用以上兩個方法是無法在畫布上看到直線的，使用lineTo(x, y)方法繪制路徑，要使路徑在畫布上顯示出來，還需要進行描邊。可以連續繪制多條路徑，然后使用stroke()方法一次性描邊?？梢允褂肅SS設置繪制直線的樣式，例如，line.html。

line.html：

line.html在瀏覽器中的顯示效果如圖3-3所示。

3.2.2 繪制矩形

canvas元素可以繪制兩種矩形：一種是填充矩形，另一種是矩形輪廓。Context對象的fillRect()方法用來繪制填充矩形，strokeRect()方法用來繪制矩形輪廓。

fillRect()方法的前兩個參數為矩形的左上角的坐標，后兩個參數為矩形的寬度和高度。strokeRect()方法的參數與fillRect()方法的參數含義相同。設置矩形的外觀可以使用fillStyle屬性和strokeStyle屬性。fillStyle屬性用來設置矩形區域的填充顏色，strokeStyle屬性用來設置矩形輪廓的顏色。例如，rect.html，繪制一個填充矩形、一個矩形輪廓。

rect.html：

rect.html在瀏覽器中的顯示效果如圖3-4所示。

3.2.3 繪制圓或圓弧

canvas元素可以用來繪制圓或圓弧，方法有beginPath()、arc()、closePath()、fill()。

1．beginPath()

開始一條路徑或重置路徑；

2．arc(x, y, r, sAngle, eAngle, counterclockwise)

x、y為圓心的坐標，r為圓的半徑，sAngle為以弧度計的起始角，eAngle為以弧度計的結束角，counterclockwise參數可選，規定逆時針或順時針繪圖，true為逆時針，false為順時針。

3．closePath()

閉合路徑，如果圖形本來就是閉合的，則此方法不起作用。

4．fill()

填充當前的路徑或圖像，默認的顏色是黑色。

例如，arc.html，繪制一個圓和若干條圓弧。

arc.html：

arc.html在瀏覽器中的顯示效果如圖3-5所示。

3.2.4 繪制三角形

使用繪制路徑的方法可以自由繪制出三角形等多邊形。例如，triangle.html，繪制一個填充色為綠色的三角形。

triangle.html：

triangle.html在瀏覽器中的顯示效果如圖3-6所示。