[TOC]
## 狀態
Canvas 是基于 “狀態” 來繪制圖形的。每一次繪制(stroke() 或者 fill()),Canvas 都會檢測整個程序定義的所有狀態,一個繪畫的狀態包括:
* 當前應用的變形(即移動,旋轉和縮放)
* `strokeStyle`,`fillStyle`,`globalAlpha`,`lineWidth`,`lineCap`,`lineJoin`,`miterLimit`,`shadowOffsetX`,`shadowOffsetY`,`shadowBlur`,`shadowColor`,`globalCompositeOperation` 的值
* 當前的裁切路徑(`clipping path`)
Canvas 提供了兩個操作狀態的方法:save() 和 restore()
我們可以認為 Canvas 的狀態存儲在一個棧中,每當 save() 方法被調用,當前狀態就被推入狀態棧中,可以調用任意多次 save() 方法。而 restore() 方法就相當于彈出狀態棧的棧頂狀態并恢復到這個狀態。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="canvas" width="500" height="200" style="border: 1px solid gray; display: block; margin: 0 auto"></canvas>
<script>
window.onload = function(){
let cnv = document.getElementById('canvas')
let cxt = cnv.getContext('2d')
// cxt.save()
cxt.fillStyle = 'HotPink'
cxt.translate(30, 30)
cxt.fillRect(0, 0, 100, 50)
// cxt.restore()
cxt.fillStyle = 'LightSkyBlue'
cxt.translate(60, 60)
cxt.fillRect(0, 0, 100, 50)
}
</script>
</body>
</html>
```

上面這個例子中,如果我們想讓第二次 translate() 相對于最初的坐標原點進行移動,就可以利用 save() 和 restore() 方法來實現。

## 路徑
Canvas 提供了三種操作路徑的方法
| 方法 | 說明 |
| --- | --- |
| beginPath() | 開始一條新的路徑 |
| closePath() | 關閉當前路徑 |
| isPointPath() | 判斷某一個點是否存在于當前路徑 |
案例:
```js
// 開始路徑
context.beginPath();
context.strokeStyle = 'blue';
context.moveTo(60, 20);
context.lineTo(220, 20);
context.stroke();
// 開始路徑 again
context.beginPath();
context.strokeStyle = 'green';
context.moveTo(60, 20);
context.lineTo(160, 120);
context.stroke();
```

再看下面的代碼:
```js
// 開始路徑
context.beginPath();
context.strokeStyle = 'blue';
context.moveTo(60, 20);
context.lineTo(220, 20);
context.stroke();
context.strokeStyle = 'green';
context.moveTo(60, 20);
context.lineTo(160, 120);
context.stroke();
```

之前提到過,Canvas 是基于狀態來繪制圖形的,那么當一個狀態值沒有被改變時,Canvas 就一直使用最初的值,而當一個狀態值被改變時,就要分兩種情況考慮:
(1) 如果使用 beginPath() 開始一個新的路徑,則不同路徑使用不同的值,即繪制結果不影響之前的路徑。
(2) 如果沒有使用 beginPath() 開始一個新的路徑,則后面的值會覆蓋前面的值。
比如上面的第二張圖兩條直線屬于同一路徑,用新的狀態來繪制時自然就會影響這兩條直線了。
### closePath()
closePath() 方法的作用是連接起點與終點,使其成為一個封閉的圖形,即 “關閉路徑”。需要注意的是 “關閉路徑” 并不等同于 “結束路徑”,即其并沒有起到新調用一次 beginPath() 的作用。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="canvas" width="500" height="300" style="border: 1px solid gray; display: block; margin: 0 auto"></canvas>
<script>
window.onload = function(){
let cnv = document.getElementById('canvas')
let cxt = cnv.getContext('2d')
cxt.beginPath()
cxt.strokeStyle = 'red'
cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, true)
cxt.closePath()
cxt.stroke()
// cxt.beginPath()
cxt.strokeStyle = 'blue'
cxt.arc(70, 120, 50, 0, -90 * Math.PI / 180, true)
cxt.closePath()
cxt.stroke()
}
</script>
</body>
</html>
```

添加了 beginPath() 后才能達到預期的效果。

### isPointPath() 方法
```js
cxt.isPointInPath(x, y)
```
該方法用于判斷點(x,y)是否位于當前路徑中,如果存在則返回 true,否則返回 false。