html制作花样链接卡页面_Html5实现移动端、PC端 刮刮卡效果

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

刮刮卡需求：

每一位用户有三次刮刮卡的机会

本次刮刮卡的结果会覆盖上次的结果

刮刮卡的中奖几率呈现为递增的曲线(保证三次中必须有一次中奖)

刮出的结果包含按钮既(领取奖品 or 再来一次 )

分享活动奖品升级(这里主要是微信分享的回调了)

我们自己的需求，今天就说怎么制作刮刮卡，有这样需求的可以找我要源码

第一、body创建Canvas

领取奖品

再来一次