# [JS30] Day.8 Fun with HTML5 Canvas
###### tags: `JS30`
## 任務 Task
使用`HTML Tag` `<canvas>`來做出畫布，並能在實現畫畫效果，並能改變顏色及筆畫粗細。

==完成時間：0.5hr==
## 筆記 Note

### HTML `<canvas>`
* 預設寬高為 `width = 300px` `height = 150px`，不打 `px` 也沒關係，因為他只能用 `px`。
* 可透過 `CSS` `JS` 來設定寬高，不過 `CSS` 設定時可能會造成圖片扭曲，最好還是用 `HTML` 、 `JS` 來設定。
### JS
* `getContext('2d')`：取得渲染環境及繪圖函數。

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

#### 繪圖函數：
* ==矩形==：
* `ctx.fillRect(x, y, width, height)`：畫出一個填滿的矩形。
* `ctx.strokeRect(x, y, width, height`：畫出一個矩形邊框。
* `ctx.clearRect(x, y, width, height)`：清除指定區域的內容，使其變為透明。
* ==畫線==：
* `ctx.beginPath()`：產生一個新的路徑。
* `ctx.clostPath()`：結束一個路徑
* `ctx.stroke()`：劃出線的的邊框。
* `ctx.fill()`：填滿線圍出的形狀。
* `ctx.moveTo()`：指定畫筆的起點。
* `ctx.lineTo()`：從起點畫到指定位置。
* ==圓形==：
* `ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)`：
* `x, y`代表圓心座標，`radius` 代表半徑。
* `startAngle`、`endAngle` 代表弧線上的起始與結束的弧度（不是角度喔！）。
* `anticlockwise` `true` 代表逆時針做圖，`false` 代表順時針做圖。
* ==顏色==：
* `ctx.fillStyle = `：填滿圖案的顏色
* `ctx.storkStyle = `：勾勒圖案的線條顏色
* ==線條端點樣式==：
* `ctx.lineWidth = `：設定線條的寬度。
* `ctx.linCap = `：設定線條結尾樣式。
* `ctx.linJoin = `：設定線條接合處樣式。
* 樣式參數：`butt`：方形｜`round`：圓形｜`square`：方形但高會超出寬的一半。

## 想法 Idea
:::warning
:bulb: <font color=black>製做一個簡易的小畫家功能。
</font>
:::
<iframe height="300" style="width: 100%;" scrolling="no" title="Paint with canvas" src="https://codepen.io/jim876633/embed/xxYBBxR?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jim876633/pen/xxYBBxR">
Paint with canvas</a> by Jim (<a href="https://codepen.io/jim876633">@jim876633</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### 方法 method
#### 儲存 `canvas` 圖片的方法
* `canvas.toDataURl([type, encoderOption])` 可以取得圖片網址，`type` 可為圖片類型，預設為 `png`
`encoderOption` 為畫值，範圍 `0~1`。

save.addEventListener("click", function () {
    let imageName = prompt("Please enter image name");
    if(!imageName)return;
    let canvasDataURL = canvas.toDataURL();
    let a = document.createElement("a");
    a.href = canvasDataURL;
    a.download = imageName || "drawing";
    a.click();
});