最後要介紹的剪裁方法是Canvas原生方法 - clip()。clip()是canvas原生提供函數可以對整個畫布做剪裁，要被剪裁的圖案放在.clip()程式後面

剪裁流程是沿著沿著路徑去裁切，並保留原本的路徑內的圖案，codrops上提供了非常好的範例流程，我做了個小圖如下示意

程式範例

需要被剪地的部分以下統一稱為路徑，畫布上可以自由作畫，無論在同一個位置上放了幾個圖形文字，但一旦剪裁掉後，就會把整張畫布挖空。因此我們有時候會需要兩張畫布來作畫

使用圖形路徑剪裁

剪裁圖形

使用圖形剪裁圖形，要注意clip()放的位置與上下程式碼的關係。clip()上方的程式法最為剪裁路徑使用

步驟如下

• 先劃一個圓
• 下clip指令
• 畫上各式各樣的圖案

結果會留下存在圓內的內容

剪裁字形

一樣使用圓形來剪裁文字，下面範例中字串被切割，並只有保留部分文字

剪裁圖檔

使用文字路徑剪裁

原生Canvas方法只能使用圖形路徑，文字套用的話是不行的，可以看底下錯誤示範圖，最後我們只得到原本的綠色文字，而預期會以文字路徑保留的圖片則是連影子都沒看到

這是錯誤、無法使用的程式碼，作為示意圖，請不要用_(┐ ◟;ﾟдﾟ)ノ

那要怎麼辦勒，還記得在Day17的blendMode嗎?那時候有列出p5提供的顏色設定與canvas的globalCompositeOperation()比較，如果我們希望可以用到原生語法的裁切圖片模式的話，要設定兩張畫步，並且在兩張畫布中間塞入程式碼

剪裁圖形

先來看一下如果沒有設定globalCompositeOperation()，會是什麼樣的畫面

globalCompositeOperation()在這邊設定成source-atop，會保留舊圖形，與有疊在舊圖形上的新圖形

剪裁字形

剪裁圖檔

使用圖檔路徑剪裁

狀況與文字一樣，都無法使用clip()操作，可以用canvas的globalCompositeOperation()設定裁切模式

剪裁圖形

剪裁字形

剪裁圖檔

小結

這邊整理了一下遮罩的三種方法，與可以應用的範圍

遮罩的三種方法總整理