# SVG繪圖基礎語法與動畫原理
什麼是Canvs? 簡單來說在html、css沒有辦法製作出的情況下做特效，Canvas有下列的特性:
- 可以自由繪圖的元件區域
- 可以控制像素的顏色與繪製
- 高操控度但相對技術門檻也高
- 可以想像是一張動態可改寫的圖片

[有趣的SVG動畫網站](https://musiclab.chromeexperiments.com/Experiments)

在Canvas的單元內要掌握的要點有:
1. 繪製圖形
2. 向量概念
3. 三角函數數學
4. 物件導向開發

## 1.繪製圖形
繪製Canvas一個是須注意畫布上的座標，並且用點、線、面來繪製圖形。
用點跟點連成線、由線構成面，在依據路徑填色或畫線


Canvas坐標系需要注意的是原點的部分在左上(0,0)，角度為逆時針，Y軸向下為正值


### 基礎圖形
- 填滿矩形:fillRect(x,y,w,h,)
- 框線矩形:storkRect(x,y,w,h)
- 清除矩形範圍:clearRect(x,y,w,h)

### 路徑繪圖
- 路徑開始與封閉: beginPath/closePath
- 在畫每一個圖形之前，都需要重新做設定，在沒有清掉bgginPath以前都可以持續畫路徑
- 移動與畫線:moveTo/lineTo/arc...
- miveTo:把畫筆的頭移動到特定的位置(x1,y1)
- lineTo:連到第二個位置(x2,y2)
- 最後繪製要關閉路徑時，可以呼叫closePath把路徑關起來
- 指定顏色或線條顏色:fillStyle/ lineStyle
- 這邊需要特別注意的是，如果沒有重新設定顏色的話，接下來的圖形/線段都會沿用已設定好的驗色
- 最後把路徑填色或描線:fill/stork

**一般來說都是先填色再畫線，不然線條會被填色給遮住**


### 弧形
- arc(x,y,半徑,start Angle, end Angle)
- Angle:Math.PI為180deg，若要畫一個圓，結束的角度為Math.PI*2
- 弧形的角度方向為逆時針，若需要劃一個反過來的圓，只需要最後加一個參數為treu
`ctx.arc(175, 250, 25, 0, Math.PI, true);`

### 文字
- fillText('要繪製的文字',x,y):實心字
- strokeText('要繪製的文字',x,y):空心字

### 色彩系統

[Codepen基礎繪圖練習](https://codepen.io/abbyd0208/pen/XWpEMxO)
## 製作動畫
### 時間函數:
- setInterval(update,time)
- requestAnimationFrame(update):讓動畫效能會比較順
- 更新影格:動畫其實是藉由更新畫面所做出的效果
- 使用clearRect或fillRect
- 覆蓋上次繪圖的路徑
### 取得滑鼠位置
- mousemove()
- mousedown()
- mouseup()
- click()

以上會取得相對於canvas畫布的位置，所以會用offsetX與offsetY來取得X或Y座標

圖片出處:[動畫互動網頁特效入門（JS/CANVAS）](https://hahow.in/courses/586fae97a8aae907000ce721/main)

###### tags: `Canvas`