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

2018-11-30 | 53浏览 | 0评论 | 标签:canvas 刮刮卡

刮刮卡.jpg

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来运行。

(本篇完。欢迎留言探讨, 或打赏支持。)

添加评论 (已启用人工审核)

打赏
编辑代码 运行结果
退出