1. 獲取canvas對象的畫筆。

　　document.getElementById(" ID名 ").getContext(‘ 2d ‘);

2. 設置畫筆屬性。

　　.lineWidth = 5; 設置劃線寬度為5像素。

　　.strokeStyle = "rgb(250,255,20); 設置畫線顏色。

　　.fillStyle = "red" 設置填充顏色。

3. 畫矩形

　　.strokeRect(x, y, w, h); 畫矩形框

　　.fillRect(x, y, w, h); 畫矩形面

4. 路徑畫圖。

　　.beginPath() 開始路徑定義

　　.closePath() 閉合路徑（使首尾相連）

　　.fill() 填充

　　.stroke() 劃線

　　.moveTo(x, y) 移動畫筆到（x, y）

　　lineTo(x, y) 從當前位置劃線至（x, y）

　　arc(x, y, r, s, e, b) 畫弧（xy坐標，r半徑， s e開始與結束角度， b 劃線方向 true為逆時針）

5. 清除畫面內容。

　　.clearRect(x,y,w,h) 擦除矩形中的內容

JS canvas畫圖