我們都知道在canvas 可以通過clip來實現剪裁功能，其步驟一般是先設置要裁剪的區域（路徑），然后通過ctx.clip()的實現裁剪，裁剪之后，后續的繪制只能在裁剪的區域顯示效果，比如如下一段代碼，實現了一個圓形裁剪：

ctx.beginPath();
ctx.arc(100,100,50,0,Math.PI*2);
ctx.clip();ctx.rect(0,0,200,200);
ctx.fillStyle='red';
ctx.fill();

最終效果如下：

有的時候，我們希望能夠實現反向裁剪，比如上面例子中，我們希望是圓圈外面是裁剪區域，而不是圓圈內部是裁剪區域。這就是標題所說的反向裁剪。效果如下圖所示：

如何實現反向裁剪呢？
筆者通過實踐，發現有以下幾種思路。

使用合成模式globalCompositeOperation

通過設置globalCompositeOperation的值，可以實現類似的反向裁剪的效果。大致思路是：

• 首先繪制一個圖形（比如圓形），該圖形外部的區域將會是裁剪區域
• 設置globalCompositeOperation的值為source-out
• 然后繪制想要繪制的圖形（比如矩形）

示例代碼如下：

 ctx.beginPath();ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();ctx.beginPath();
ctx.globalCompositeOperation = 'source-out';
ctx.rect(0, 0, 200, 200);
ctx.fillStyle = 'red';
ctx.fill();

最終效果參考上面的圖形“反向裁剪”。

使用clip + clearRect方法

另外一種思路是使用clip + clearRect方法，大概的思路如下：

• 首先繪制要繪制的圖形（比如矩形）
• 然后設置要反向裁剪的圖形的路徑（比如圓形）
• 然后調用clip ，再調用clearRect方法清除圓形區域的像素。

示例代碼如下：

   ctx.beginPath();ctx.rect(0, 0, 200, 200);ctx.fillStyle = 'red';ctx.fill();ctx.beginPath();ctx.arc(100, 100, 50, 0, Math.PI * 2);ctx.clip();ctx.clearRect(0, 0, 200, 200);

最終效果參考上面的圖形“反向裁剪”。

利用非零環繞原則

我們知道非零環繞原則，可以通過調整路徑的方向（順時針和逆時針），來實現挖空的效果，大致思路如下：

• 首先構建一個大的區域路徑（順時針方向），比如矩形
• 然后構建一個小的區域路徑（逆時針方向），比如圓形
• 調用clip裁剪，然后繪制圖形

示例代碼如下：

ctx.beginPath();
ctx.rect(0, 0, 200, 200); //順時針方向
ctx.arc(100, 100, 50, 0, Math.PI * 2, true); // 逆時針方向
ctx.clip();ctx.beginPath();
ctx.rect(0, 0, 200, 200);
ctx.fillStyle = 'red';
ctx.fill();

arc方法的最后一個參數可以控制順時針（false）和逆時針（true），而rect方法沒有，可以通過moveTo，lineTo，自己構建逆時針的rect方法，如下代碼所示：

function counterclockwiseRect(ctx, x, y, w, h) {ctx.moveTo(x, y);ctx.lineTo(x, y + h);ctx.lineTo(x + w, y + h);ctx.lineTo(x + w, y);ctx.lineTo(x, y);
}

最終效果參考上面的圖形“反向裁剪”。

參考文檔

https://stackoverflow.com/que...
https://stackoverflow.com/que...
http://caibaojian.com/canvas/...（非零環繞原則 ）

歡迎關注公眾號“ITman彪叔”。彪叔，擁有10多年開發經驗，現任公司系統架構師、技術總監、技術培訓師、職業規劃師。熟悉Java、JavaScript、Python語言，熟悉數據庫。熟悉java、nodejs應用系統架構，大數據高并發、高可用、分布式架構。在計算機圖形學、WebGL、前端可視化方面有深入研究。對程序員思維能力訓練和培訓、程序員職業規劃有濃厚興趣。