掩蓋帶圖像的畫布

Question

這就是情況：我需要做一個「飛濺」效果來顯示背後的內容（無論是身體背景圖像還是谷歌地圖）。我正在考慮在實際內容上疊加畫布。畫布最初會有不透明的（白色）背景。然後，我會用飛濺圖像和interval來掩蓋它以顯示底層內容。

我發現這個小提琴，做類似的事情：http://jsfiddle.net/VqCbv/43/ 然而，面具畫有fillRec和createLinearGradient我可以以某種方式修改代碼以使用實際圖像的面具，更靈活的形狀？

在此先感謝。

Answer 1

您需要做的只是首先使用「飛濺」創建並加載圖像。然後，設置畫布的組成模式destination-out和簡單地畫上畫布的頂部圖像：

ctx.globalCompositeOperation = 'destination-out'; 
ctx.drawImage(img, 0, 0); 

會發生什麼事是，那些圖像中的所有像素將刪除畫布上的像素離開該地區該圖像是透明區域。其他像素（白色）將完好無損。

示範（點擊畫布飛濺）：
http://jsfiddle.net/AbdiasSoftware/4A4Qv/

正如你可以看到一個洞口衝出畫布所以背景是可見的。