canvas實現刮開抽獎效果

網頁特效——刮刮效果實現。

首先分析一下，實現刮刮效果的原理，須要用到html5中的畫布canvas，這是一個強大的提供繪製功能的標籤，主要用在網頁中的圖表呈現，好比一些折線圖、扇形圖等，甚至在遊戲開發當中也有普遍的運用，過多的介紹就很少說，刮刮效果須要會使用canvas實現基本的路徑繪製，另外須要知道如何獲取手指在頁面當中的位置（方便跟蹤手指移動並繪製），其次須要用到一個核心屬性globalCompositeOperation，該屬性設置或返回如何將一個源（新的）圖像繪製到目標（已有的）的圖像上，其屬性值不少，請看下圖，其中紅色框選出來的屬性值是刮刮效果實現的取值,新圖像會以透明的效果出現：

下面先來測試一個這個屬性，須要設置canvas背景圖以下：

接下來繪製一個與畫布等寬高的矩形(已有圖)以覆蓋背景,如何再次繪製一個小矩形（新圖），此時會看到下面的效果，經過小矩形（新圖）透明效果看到了裏面的背景獎項：

如下是該屬性測試的代碼：

理解到這裏那麼實現刮刮效果就很是簡單了，只須要將繪製的新圖小矩形，換成鼠標追蹤手指的位置便可，而後經過路徑繪製的方式繪製出每一次鼠標點擊移動的路徑，代碼以下：

看看是否是你想要的效果：

若有錯誤之處，歡迎指正，很是感謝!前端更多技術交流，換衣關注我的微信公衆：CodingInfo