刮刮乐
前言分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码
效果图
HTML
HTML
CSS
CSS
JS首先 需要绘制一块Canvas蒙版 遮罩在图片上
绘制蒙版
效果图
然后利用canvas的globalCompositeOperation属性 显示原来的不在后来区域的部分
消除蒙版
效果图
那么会出现一个问题 用户需要刮开全部蒙版的话会很费事(强迫症伤不起 - -), 所以再加一段代码
添加刮开70% 自动刮开全部效果
整体代码
最终效果
需要注意的是本demo主要运用到globalCompositeOperation 画布的一个功能 作用是设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上,还有其余10种写法
在线DEMO及源码https://jsfiddle.net/jmogkq9d/3/
