[TOC]
# \<canvas\>元素
```html
<canvas id="tutorial" width="300" height="300"></canvas>
```
如果不給`<canvas>`設置`width`、`height`屬性，則默認`width`為 300、`height`為 150，單位都是`px`。也可以使用 css 屬性來設置寬高，但是如寬高屬性和初始比例不一致，他會出現扭曲。所以，建議永遠不要使用 css 屬性來設置`<canvas>`的寬高。
# 直線
```js
context.moveTo(x, y)
```
`moveTo()`的含義可以理解為 "將畫筆移動到（x，y）位置上，然后開始繪圖"。
```js
context.lineTo(x, y)
```
`lineTo()`理解為繪制直線到（x，y）位置即可。
```js
context.stroke()
context.stroke(path) // Path2D對象，IE 瀏覽器不支持
```
`stroke()`方法用于對路徑進行描邊。
<br />
繪制一個箭頭：之后代碼不一定會貼出完整的 html 了
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>arrow</title>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border: 1px dashed gray;"></canvas>
</body>
</html>
<script>
window.onload = function () {
let cnv = document.getElementById('canvas')
let cxt = cnv.getContext('2d')
cxt.moveTo(40, 60)
cxt.lineTo(100, 60)
cxt.lineTo(100, 30)
cxt.lineTo(150, 75)
cxt.lineTo(100, 120)
cxt.lineTo(100, 90)
cxt.lineTo(40, 90)
cxt.lineTo(40, 60)
cxt.stroke()
}
</script>
```
效果圖：
# 矩形
## "描邊" 矩形
我們可以使用`strokeStyle`屬性和`strokeRect()`方法來繪制一個"描邊"矩形，注意，我們稱`strokeStyle`為 context 對象的一個屬性，`strokeRect()`為 context 對象的一個方法。
<br />
語法：和描邊是相同的
```js
cxt.strokeStyle = 屬性值
cxt.strokeRect(x, y, width, height)
```
說明：x、y 表示矩形左上角的坐標，width、height 分別表示矩形的寬度和高度，如圖。
## "填充" 矩形
我們可以使用`fillStyle`屬性與`fillRect()`方法來繪制一個"填充"矩形。
語法：
```js
cxt.fillStyle = 屬性值
cxt.fillRect(x, y, width, height)
```
我們同時使用描邊和填充的效果如下：
```js
cxt.strokeStyle = 'red' // 先確定 Style 再繪制
cxt.strokeRect(50, 50, 80, 80)
cxt.fillStyle = '#FFE8E8'
cxt.fillRect(50, 50, 80, 80)
```
## rect() 方法
`rect()`方法也可以繪制矩形，與上面兩種方法略有不同。
語法：
```js
rect(x, y, width, height)
```
同樣的，x、y 為矩形的最左上角的坐標，width、height 分別表示矩形的寬度和高度。
其不同之處在于：`strokeRect()`和`fillRect()`這兩個方法在調用之后，會立即把矩形繪制出來，而`rect()`方法在調用之后，并不會把矩形繪制出來，只有在使用`rect()`方法之后再調用`stroke()`或`fill()`方法，才會繪制矩形。
<br />
代碼示例如下：
```js
// 繪制描邊矩形
cxt.strokeStyle = 'red'
cxt.rect(50, 50, 80, 80)
cxt.stroke()
// 繪制填充矩形
cxt.fillStyle = '#FFE8E8'
cxt.fill()
```
## 清空矩形
我們可以使用`clearRect()`方法來清空指定矩形區域。
語法：
```js
cxt.clearRect(x, y, width, height)
```
我們可以使用下面的代碼來清空整個 Canvas：
```js
context.clearRect(0, 0, context.width, context.height)
```
# 多邊形
## 繪制正多邊形
我們可以根據正多邊形的特點封裝一個函數`createPolygon()`來繪制正多邊形，以最簡單的正三角形為例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>繪制正多邊形</title>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border: 1px dashed gray;"></canvas>
</body>
</html>
<script>
window.onload = function () {
let cnv = document.getElementById('canvas')
let cxt = cnv.getContext('2d')
// 調用自定義方法
createPolygon(cxt, 3, 100, 75, 50)
cxt.fillStyle = 'HotPink'
cxt.fill()
/*
* n: 表示 n 邊形
* dx、dy: n 邊形的中心坐標
* size: 表示 n 邊形的大小
*/
function createPolygon (cxt, n, dx, dy, size) {
cxt.beginPath() // 開始一條新的路徑
let degree = (2 * Math.PI) / n
for (let i = 0; i < n; i++) {
let x = Math.cos(i * degree)
let y = Math.sin(i * degree)
cxt.lineTo(x * size + dx, y * size + dy)
}
cxt.closePath() // 關閉路徑
}
}
</script>
```
 
## 繪制七巧板
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas七巧板</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<!--不用 css 樣式指定而直接使用屬性-->
<canvas id="canvas" style="border: 1px solid gray; display: block; margin: 50px auto;"></canvas>
<script>
let tangram = [
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:'#67becf'},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'#ef3d61'},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'#f9f51a'},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'#a594c0'},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'#fa8ecc'},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'#caff67'},
]
window.onload = function () {
let canvas = document.getElementById('canvas');
canvas.width = 800;
canvas.height = 800;
let context = canvas.getContext('2d');
for(let i = 0; i < tangram.length; i++){
draw(tangram[i], context);
}
}
function draw (piece, cxt) { // 第一個參數是七巧板中的一塊，第二個是 context
cxt.beginPath();
cxt.moveTo(piece.p[0].x, piece.p[0].y);
for(let i = 1;i < piece.p.length; i++){
cxt.lineTo(piece.p[i].x, piece.p[i].y);
}
cxt.closePath();
cxt.fillStyle = piece.color;
cxt.fill();
cxt.strokeStyle = 'black';
cxt.lineWidth = 3;
cxt.stroke();
}
</script>
</body>
</html>
```
