JS canvas畫圖

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)      擦除矩形中的內容