js原生刮刮卡(兼容移动端+pc)

javascript+canvas刮刮卡网上有很多版本，原理都一样。如果你需要满足以下要求，可以看看本文的刮刮卡：

1. 一、不需要引入jQuery/zepto;
2. 二、需要页面宽度自适应
3. 三、需要兼容pc+wap
4. 四、需要自定义蒙层图案
5. 五、需要刮到一定面积清除全部蒙层
6. 六、需要一个刮完回调

演示

https://denghao.me/demo/2018/ggk/index.html

源码

代码很少，都写在html里了，请f12查看。

提示

chrome浏览器安全限制越来越严，如果你直接在本地硬盘运行源码，canvas加载图片会报跨域错误 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.，需要启一个localhost来运行。