Html5实现移动端、PC端 刮刮卡效果

刚从南方回来就分了一个刮刮卡效果的页面，特么的我在烦恼怎么用H5去实现这个效果呢，好不容易写出来了，产品居然说：“既然你可以写出来这个效果那当然好了，开始我只是打算让你实现点击就出现呢！”… … 尼玛干嘛不早说呢？？？？？真是自找麻烦。既然写了就分享给大家吧，这个效果其实很早就有了，只是我们不常用到罢了。H5的Canvas我很坦然的说我不会。但是既然工作上需要就需要学习一下了。虽然有demo但是自己写的时候还是出现了很多的bug。下面给大家说一下实现刮刮卡效果的步骤吧。（ps：按照我自己的demo讲了）

刮刮卡需求：

1. 每一位用户有三次刮刮卡的机会
2. 本次刮刮卡的结果会覆盖上次的结果
3. 刮刮卡的中奖几率呈现为递增的曲线（保证三次中必须有一次中奖）
4. 刮出的结果包含按钮既（领取奖品 or 再来一次 ）
5. 分享活动奖品升级（这里主要是微信分享的回调了）
6. 我们自己的需求，今天就说怎么制作刮刮卡，有这样需求的可以找我要源码

第一、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>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：Html5实现移动端、PC端 刮刮卡效果

关键词：HTML