50行代碼實現H5刮刮樂效果（兼容PC及移動端）

刮刮樂

前言

分享一段用canvas和JS製作刮刮樂的代碼,JS部分去掉註釋不到20行代碼

效果圖

HTML

HTML

CSS

CSS

JS

首先 需要繪製一塊Canvas蒙版 遮罩在圖片上

繪製蒙版

效果圖

然後利用canvas的globalCompositeOperation屬性 顯示原來的不在後來區域的部分

消除蒙版

效果圖

那麼會出現一個問題 用戶需要刮開全部蒙版的話會很費事(強迫症傷不起 - -), 所以再加一段代碼

添加刮開70% 自動刮開全部效果

整體代碼

最終效果

需要注意的是

本demo主要運用到globalCompositeOperation 畫布的一個功能 作用是設置或返回如何將一個源（新的）圖像繪製到目標（已有）的圖像上,還有其餘10種寫法

在線DEMO及源碼

https://jsfiddle.net/jmogkq9d/3/