本篇文章主要介绍了"Html5实现移动端、PC端 刮刮卡效果"，主要涉及到HTML5方面的内容，对于HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
刚从南方回来就分了一个刮刮卡效果的页面，特么的我在烦恼怎么用H5去实现这个效果呢，好不容易写出来了，产品居然说：“既然你可以写出来这个效果那当然好了...
刚从南方回来就分了一个刮刮卡效果的页面，特么的我在烦恼怎么用H5去实现这个效果呢，好不容易写出来了，产品居然说：“既然你可以写出来这个效果那当然好了，开始我只是打算让你实现点击就出现呢！”… … 尼玛干嘛不早说呢？？？？？真是自找麻烦。既然写了就分享给大家吧，这个效果其实很早就有了，只是我们不常用到罢了。H5的Canvas我很坦然的说我不会。但是既然工作上需要就需要学习一下了。虽然有demo但是自己写的时候还是出现了很多的bug。下面给大家说一下实现刮刮卡效果的步骤吧。（ps：按照我自己的demo讲了）
刮刮卡需求：
- 每一位用户有三次刮刮卡的机会
- 本次刮刮卡的结果会覆盖上次的结果
- 刮刮卡的中奖几率呈现为递增的曲线（保证三次中必须有一次中奖）
- 刮出的结果包含按钮既（领取奖品 or 再来一次 ）
- 分享活动奖品升级（这里主要是微信分享的回调了）
- 我们自己的需求，今天就说怎么制作刮刮卡，有这样需求的可以找我要源码
第一、body创建Canvas
<div class="info" id="prize"><span id="prompt">span><span class="btn" id="ok">领取奖品span><span class="btn" id="no">再来一次span>div><canvas id="c1" class="canvas">canvas>
这里我们首先创建了一个Canvas，并且在canvas底部加上了刮开后的效果。
第二、 页面加载后开始初始化画布
首先定义一些需要的变量
