canvas 橡皮擦效果

canvas 橡皮擦效果

前幾天有一個廣告項目， 產品經理說客戶想要一個擦除的效果。一開始我的內心是拒絕的，沒有做過，時間又挺趕的。但是嘗試做了一下，其實這種效果還是挺容易做到的。

效果圖

---

大概思路是 首先設置一張背景圖 => 設置 canvas 遮擋 => canvas中使用圖片=> 設置其合成模式爲destination-out=>監聽觸摸事件，將當前移動的區域裁剪掉

更多細節查看 github

移動端在線demo 僅適用於移動端

pc端在線demo