50行代码实现H5刮刮乐效果（兼容PC及移动端）

刮刮乐

分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码

效果图

HTML

CSS

首先 需要绘制一块Canvas蒙版 遮罩在图片上

绘制蒙版

效果图

然后利用canvas的globalCompositeOperation属性 显示原来的不在后来区域的部分

消除蒙版

效果图

那么会出现一个问题 用户需要刮开全部蒙版的话会很费事(强迫症伤不起 - -), 所以再加一段代码

添加刮开70% 自动刮开全部效果

整体代码

最终效果

本demo主要运用到globalCompositeOperation 画布的一个功能 作用是设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上,还有其余10种写法

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