Part9-路徑與狀態 · 前端小冊

[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> ``` ![](https://img.kancloud.cn/fa/f4/faf410b99607a403f24c53f4a7e899d1_681x276.png) 上面這個例子中，如果我們想讓第二次 translate() 相對于最初的坐標原點進行移動，就可以利用 save() 和 restore() 方法來實現。 ![](https://img.kancloud.cn/e2/94/e2947aa06103376a5e40f69dc97c2c10_671x271.png) ## 路徑 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(); ``` ![](https://img.kancloud.cn/4e/78/4e7801c53e89b749db74337db33bc592_403x204.png =300x) 再看下面的代碼： ```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(); ``` ![](https://img.kancloud.cn/91/72/9172c1bea7e5add38cde40636d989912_394x204.png =300x) 之前提到過，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> ``` ![](https://img.kancloud.cn/e6/91/e691049a07ce4b12dfa618494cd3924b_654x395.png =300x) 添加了 beginPath() 后才能達到預期的效果。 ![](https://img.kancloud.cn/4c/d2/4cd2dca2ed0567e5f67a0653e3b01bec_653x395.png =300x) ### isPointPath() 方法 ```js cxt.isPointInPath(x, y) ``` 該方法用于判斷點（x，y）是否位于當前路徑中，如果存在則返回 true，否則返回 false。