[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。
