# Canvas - Note 2 ：基本操作
###### tags: `DOM`
## (一) . 座標軸
- ```canvas```元素是有x-y軸設定的，才可以進行作畫。

- ```canvas```元素跟一般的SVG一樣，基本上內建的功能為做出線與舉行而已。

## (二) . 畫矩型
1. 函式 ： ```fillRect(x, y, width, height)```。
- 功用 ： 填滿指定的矩型。
3. 函式 ： ```clearRect(x, y, width, height)```。
- 功用 ： 清除指定區域的矩型。
5. 函式 ： ```strokeRect(x,y,width,height)```。
- 功用 ： 將指定區域的矩型邊界畫上。

## (三) . 畫線
### 步驟 ：
- $Step \ 1$ : ```beginPath()```。
- $Step \ 2$ : ```moveTo```和```lineTo```。
- $Step \ 3$ : ```fill()``` 或```stroke```。
- $Step \ 4$ : ``` closePath()```。
### 函式 ：
- ```beginPath()``` : 需要告訴```CanvasRenderingContext2D```物件開始畫直線。
- ```moveTo()```和```lineTo()``` : 將畫筆移動到指定位置，或畫線。
- ```moveTo(x,y)``` : 將畫筆移動到x，y位置。
- ```lineTo(x,y)``` : 將畫筆由現在位置移動到指定位置。

- ```fill()``` 或```stroke``` ： 將已經畫好的線塗上顏色，或是將線圍起來的區域塗色。
- ```fill()``` : 塗色。
- ```stroke``` : 將線塗色而已。

- ```closePath()``` : 畫完後，收起畫筆的動作。
- 若已經呼叫```fill()```後，會自動關上畫筆。

### 簡述原理 ：
- 抽象動作 ： 拿起畫筆->指定線->並將線塗色或填滿->收起畫筆。
- ```moveTo()```和```lineTo()```只是將一堆的『點』加入，要由後面的函數對點進行操作。

## (四) . 其他常見的函式
### ```arc(x,y,radius, startAngle, endAngle, anticlockwise)``` :
1. 功用 : 畫出一個弧。
2. ```x```和```y``` : 代表原心位置。
3. ```radius``` : 代表半徑。
4. ```startAngle```和```endAngle``` ： 為徑度，代表開始角和結束角。
5. 注意 ： 僅畫出一系列的點，不是畫出一個實際有顏色的圖。
- 仍需要```beginPath()```。
- 也需要```fill()、 stroke()``` 。