# JavaScript題目07 - 畫板
* 完成範例：[CodePen](https://codepen.io/liu_0821/pen/ExrYWwP)、[Medium](https://medium.com/@LindaLiu0821/javascript%E5%9C%B0%E4%B8%8B%E5%9F%8E07-%E7%95%AB%E6%9D%BF-13147f1c4a31)

> 7F - 畫板

### 使用語法
* HTML、CSS（SCSS）、JS（原生）
> 雖然之前畫板就有做過了，但全部都用原生JS真的是第一次次̿̿ ̿̿ ̿̿ ̿'̿’\̵͇̿̿\з=( ͠° ͟ʖ ͡°)=ε/̵͇̿̿/‘̿̿ ̿ ̿ ̿ ̿

### 攻略要點
1. 【特定技術】遊戲規則
2. 繪圖區請使用 Canvas 來設計，上方的控制列與下方的畫筆調整可不用
3. `SAVE` ：點擊後可直接下載轉出的 PNG 圖片
4. `CLEAR ALL`：清除畫版樣式
5. `UNDO`、`REDO`：上一步、下一步
6. 點擊箭頭時，功能列介面皆可進行收闔
7. 【擴充功能】請再自行增加「兩個功能」，我相信勇者們都是很有梗的~
> ~~第七點我等最後做完才發現是兩個嗚嗚（只多做了一個） :cry: 等回來再來補充~~

### 拆解步驟
1. **HTML** （這次終於把`HTML`跟`CSS`分開講了）
* 因為要製作畫板，所以不可少的就是會用到好用的<font color=blue>[Canvas](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/canvas)</font>來當作我們的螢幕畫布！

2. 這次**CSS**是用`SCSS`撰寫（真的好好用/ᐠ｡ꞈ｡ᐟ\），一樣補充一些比較特殊的部分。
* 這次是使用在我們顏色選擇器上面，原本要一個一個設定好麻煩喔(｡ŏ_ŏ)
* 但這次我們有新功能<font color=blue>迴圈</font>（灑花灑花 :wilted_flower:）
* 可以看到圖片內，一樣要用`$`給他設定個你想要放置的變數
* 設定迴圈內容
- <font color=blue>`@each`</font> 宣告我們要設定迴圈
- <font color=blue>`$key`</font> & <font color=blue>`$value`</font> 分別放置`className`和`CSS要讀取的值`
- 最後把`className`放回去`HTML`內
* 接下來Do~ Re~ Mi~ So~~
* 就可以看到預期的樣子啦
* 是不是很有趣！！！
> 小提醒：原生的CSS是不能用迴圈的唷
3. 接下來進入有趣的**JavaScript**部分拉~
4. 先製作功能介面收闔部分
* 使用`onclick`來製作，跟變數設定false / true 判斷，加上些許動畫特效，即可大功告成~
5. 撰寫畫圖的地方瞜~
* 畫筆
- 擷取滑鼠動作`mousedown`、`mousemove`、`mouseup`與設定變數判斷來製作畫筆功能
- `mousedown` --- 判斷滑鼠按下去的動作
先紀錄滑鼠第一個點`offset`，再來設定畫筆的`lineCap`與`lineJoin`([想了解更多點我](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineCap))
- `mousemove` --- 判斷滑鼠移動的動作
紀錄滑鼠移動的座標並更新
- `mouseup` --- 判斷手指放開滑鼠的動作
停止繪圖動作，且這裡為筆畫紀錄存取點
* 畫筆顏色
- `strokeStyle`表示畫筆的顏色
* 畫筆尺寸
- `lineWidth`表示畫筆的寬度
6. 撰寫功能部分
* <font color=blue>`SAVE`</font> 儲存
- 這次會用到`canvas.toDataURL()`的方式先設定圖片檔案格式 ---->**png**
- 創立`a`連結，`herf`待入值後，`click`就下載到本地拉~

* <font color=blue>`CLEAR ALL`</font> 清除畫版樣式

- 使用`clearRect`去清空`canvas`的畫面就可以瞜

* <font color=blue>`UNDO`、`REDO`</font> 上一步、下一步
- 這個地方會比較複雜一些＿ﾉ乙(､ﾝ､)＿，看原函式會更好理解唷!!
- 首先先建立function，去紀錄步驟步數與存取圖片的陣列
- 去判斷是上一步還下一步，增減步驟步數
- 建立新的 `Image`，調取對應步驟的圖片，載入影像，最後重新繪製在畫布上，即成功

7. 新增的功能 - 上傳圖片背景
* 其實會上下一步的步驟，基本上換個概念就是圖片上傳的功能了唷~
* 讀取本地上傳的檔案 --> 建立新的 `Image` --> 讀取檔案內容 --> 重新繪製在畫布上 -->成功

8. 最後恭喜畫板就大功告成了唷ᕙ(˵ ಠ ਊ ಠ ˵)ᕗ（寫文章比寫程式更累(ㆆᴗㆆ)）

### 結尾
* Q：ㄟㄟㄟ阿前面兩關去哪裡！？
A：等之後會再補回來啦！想先PASS偷懶一下，畢竟畫板好歹也是做過，所以解題思路解起來也會比較輕鬆，之後會補回來的 :satisfied:
* 這次雖然是之前有做過的題目，但全部用原生JS寫倒是第一次，很有趣!!!
感覺又有學習到新的技巧，反而比較難的是寫文章（講白了就是懶┏( .-. ┏ ) ┓）
但更期待後面的挑戰瞜~

---

##### ヽ(∀ﾟ )人(ﾟ∀)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀)人( ﾟ∀)ﾉヽ(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人( ﾟ∀)人

##### 以上 如果哪裡有錯誤或有問題，歡迎提出來一起討論~~~~