Canvas中的剪切
接下來我們要聊的不是圖像的合成，而是Canvas中的另一個有用的功能：剪切區域。它是Canvas之中由路徑所定義的一塊區域，瀏覽器會將所有的繪圖操作都限制在本區域內執行。在默認情況下，剪輯區域的大小與Canvas畫布大小一致。除非你通過創建路徑並調用Canvas繪圖環境對象的clip()方法來顯式的設定剪輯區域，否則默認的剪輯區域不會影響Canvas之中所繪制的內容。然而，一旦設置好剪輯區域，那么你在Canvas之中繪制的所有內容都將局限在該區域內。這也意味着在剪輯區域以外進行繪制是沒有任何效果的。
簡單點講，Canvas的裁切路徑和普通的Canvas圖形差不多，不同的是它的作用是遮罩，用來隱藏沒有遮罩的部分。如下圖所示，紅邊五角星就是裁切路徑，所有在路徑以外的部分都不會在Canvas上繪制出來。
從上圖所示的效果來看，跟上一節介紹的globalCompositeOperation中source-in和source-atop差不多的效果。最重要的區別是裁切路徑不會在Canvas上繪制東西，而且它永遠不受新圖形的影響。這些特性使得它在特定區域里繪制圖形時相當好用。
clip()使用
上面也說了，Canvas中的clip()方法是裁切區可用於限制圖像描繪的區域，具體的用法：
- 使用Canvas的繪制函數比如，
rect()、arc()之類的方法選擇好繪圖區域（注意：fillRect方法不起作用；需要結合closePath方法） - 使用
clip()函數將該區域（由rect()、arc()方法指定的繪圖區域）設定為裁選區
設定裁選區之后，無論在Canvas上繪制什么，只有落在裁選區內的那部分才能得以顯示，其余都會被遮蔽掉。
先來看一個示例，繪制一個四個圓而且未使用裁選區：
ctx.save(); // 繪制第一個圓 ctx.beginPath(); ctx.fillStyle = 'tomato'; ctx.arc(cx, cy, radius, 0, Math.PI * 2, false); ctx.fill(); // 繪制第二個圓 ctx.beginPath(); ctx.fillStyle = '#333'; ctx.arc(cx + 100, cy, radius, 0, Math.PI * 2, false); ctx.fill(); // 繪制第三個圓 ctx.beginPath(); ctx.fillStyle = 'cornsilk'; ctx.arc(cx, cy + 100, radius, 0, Math.PI * 2, false); ctx.fill(); // 繪制第四個圓 ctx.beginPath(); ctx.strokeStyle = '#ccc'; ctx.lineWidth = 10; ctx.arc(cx, cy, radius, 0, Math.PI * 2, false); ctx.stroke(); ctx.restore();
看到的效果如下：
接下來我們分別來看看加上clip()的效果，先來看看在第三個圓后面添加：
// 繪制第三個圓 ctx.beginPath(); ctx.fillStyle = 'cornsilk'; ctx.arc(cx, cy + 100, radius, 0, Math.PI * 2, false); ctx.fill(); ctx.clip();
從效果圖上，可以看出第四個圓（灰色的，只有邊框的圓）只有部分繪制出來。接着往下，把clip()往上移，放到第二個圓的后面。
原理同樣的，第二個圓成為裁剪區域，第三個圓和第四個圓與第二個圓有交集的地方才會繪制出來，所以看到的效果如下：
繼續按類似的方法操作，把clip()放置在第一個圓的后面。
最終的效果，或許你已經可以猜得到了：
取消裁切區
當使用裁切區clip()進行繪圖后，可能需要取消該裁選區或者重新定義裁切區。在Canvas中，可以通過save()函數和restore()函數來實現——在構建裁切區之前保存狀態，完成裁切區內的繪圖之后進行狀態讀取。
同樣拿上面的示例來舉例，依舊在第三個圓后面做clip()，並且同時做restore()：
// 繪制第三個圓 ctx.beginPath(); ctx.fillStyle = 'cornsilk'; ctx.arc(cx, cy + 100, radius, 0, Math.PI * 2, false); ctx.fill(); ctx.clip(); ctx.restore(); // 繪制第四個圓 ctx.beginPath(); ctx.strokeStyle = '#ccc'; ctx.lineWidth = 10; ctx.arc(cx, cy, radius, 0, Math.PI * 2, false); ctx.stroke();
和前面的示例效果不一樣，第四個灰色的邊框圓，他並沒有僅在第三個圓（裁切區）繪制，而是整個繪制出來了。接着往下看，把clip()往上提，提到第二個圓之后，而restore()位置不變：
如果把clip()移動第一個圓之后，然后restore()繼續放置在第三個圓之后，看到的效果如下：
制作探照燈
通過前面的介紹，我們了解了：Canvas中的clip()方法用於從原始畫布中剪切任意形狀和尺寸。一旦剪切了某個區域，則所有之后的繪圖都會被限制在被剪切的區域內（不能訪問畫布上的其他區域）。也可以在使用clip()方法前通過使用save()方法對當前畫布區域進行保存，並在以后的任意時間通過restore()方法對其進行恢復。
根據這個原理，我們就可以很輕松的實現下個探照燈的效果。
- 使用
arc()繪制一個圓形的區域，然后在其后調用clip()，設置剪切區域 - 使用
drawImage()在畫布中繪制一個圖像 - 動態改變
arc()的位置，從而看到一個類似探照燈的效果
該方法實現的效果沒有光圈的感覺，不知道大家有什么解決辦法嗎？我嘗試了繪制圓的時候使用徑向漸變變化圓的透明度，但是沒有效果。
具體的實現效果以及代碼可以看下面：
這個探照燈的效果是使用clip()方法來實現的，如果你感興趣的話，可以把這個效果的實現原理與文章《Canvas學習：globalCompositeOperation詳解》中提供的示例（圖像合成制作探照燈效果）對比，看看這兩者制作方案有何不同之處。
總結
這篇文章主要介紹了Canvas中的clip()方法的特性。clip()方法將剪切區域設置為當前剪切區域與當前路徑的交集。在第一次調用clip()方法之前，剪切區域與整個Canvas畫布大小一致。因為clip()方法會將剪切區域設置為當前剪切區域與當前路徑的交集，所以對該方法的調用一般都是嵌入save()和restore()方法之間的。否則，剪切區域將會越變越小，這通常不是我們想要的效果。合理的運用好clip()和save()以及restore()方法我們就可制作出不同的效果，比如文章中介紹的探照燈的效果。