h5 实现一个刮刮卡的动画效果

前言

又到了每天更文的时刻了，有句话怎么说来说，只要你每天坚持学习，最终胜利属于一定是 —— 在考场上发挥好的人~ 哈哈哈，这么说来，只要我每天坚持更文，最后的大奖一定属于 —— 抽奖中幸运的人。

当然啦，选择更文更主要的是想要逼着自己坚持做点事情，现在最难的是什么？最难的不就是坚持吗？想要好的身材，却不能坚持健身；想要高薪的工作，却不坚持学习；大多数人的人生大概就是在“ 想要...不坚持...” 中徘徊挣扎的度过的吧~

啊，不小心闲聊了这么多，下面开始我们今天的刮刮卡特效主题吧！

需求

之前有个需求，是要求 h5 网页实现一个刮刮卡的效果，并且刮到一定程度后，底图会完全展示出来。本来考虑着用 canvas 制作，可是做的过程中才发觉自己的 canvas 水平实在不行，于是就想着找找别人造过的轮子来用，最终找到了 wScratchPad.js，实现出来的效果奇佳~

下面就来看看实现的过程吧~

实现过程

wScratchPad.js是依赖于 JQ 的来写的库，所以要先引入 JQ，再引入wScratchPad.js，wScratchPad.js 的主要属性配置如下：

size:50, // 刷子的大小

bg:'./img/一等奖.jpg', // 背景图片（最底下的图片），可以是颜色（颜色必须是十六进制的）

fg:'./img/纯灰色图片.jpg', // 前景图片（最外层的图片，刮掉的就是该层），可以是颜色（颜色必须是十六进制的）

realtime:true, // 计算实际时间的百分比，当设置为 false 时，百分比的计算仅在 scratchUp 抬起时计算，此方法可以用于提高性能。

scratchDown:null, // 刷子（鼠标）点击就执行该函数

scratchUp:null, // 刷子（鼠标）点击后松开执行该函数

scratchMove:null, // 刷子（鼠标）点击并移动执行该函数

cursor:'crosshair', // 刷子（光标）的样式

主要方法如下：

$('#elem').wScratchPad('reset') // 重置刮刮卡蒙版效果

$('#elem').wScratchPad('clear') // 清除刮刮卡蒙版层

$('#elem').wScratchPad('enabled', true) //启用禁用当前 dom 的刮刮卡效果

看完了wScratchPad.js配置，根据配置写 demo 就很简单了，我的代码如下：

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.0/jquery.min.js"></script>    <script type="text/javascript" src="./wScratchPad.js"></script>

    <style>        #box{            width: 600px;            height: 600px;        }    </style>
    <div id="box"></div>    <script>        $('#box').wScratchPad({            size: 50,            bg: './food.png',            fg: '#ccc',            realtime: true,            scratchDown: null,            scratchUp: function(e, percent){                percent > 50? $('#box').wScratchPad('clear') : ''    // 当刮出区域大于百分之五十，就将底图全部展示            },             scratchMove: null,            cursor: 'crosshair',         });        function clear(){                    }    </script>

上面刮出区域大于百分之五十，就将底图全部展示的判断之所以放到scratchUp刷子（鼠标）点击后松开执行该函数里，是因为如果放到scratchMove刷子（鼠标）点击并移动执行该函数的话，则会有性能不好的问题，在 PC 看起来可能没什么，但是手机上尤其是低端机型，差异还是很明显的。

运行一下，实现效果如下：

简直不能更完美了！

wScratchPad.js 官方地址

wScratchPad.js官方地址如下，有官方文档可以参考，写出来还是很方便的~

https://github.com/websanova/wScratchPad

后记

希望大冰块今天分享的内容能对你有所帮助，通过以上代码可以实现刮刮卡的特效，实际场景的应用还是蛮多的，比如抽奖，游戏交互、落地页的小彩蛋等等，属于一个好玩、炫酷又有意思的点~

今天是我坚持日更的第二十三天，今天又加了班，回家之后还是坚持更了这篇文章，可能读起来只要三五分钟，写出来可就要一个多小时了~

每天输出一点点，进步一点点。有志者，事竟成。大家一起加油呀~

如果本文对你有帮助，别再是悄悄收藏啦！点个赞，关注大冰块，看更多好玩的技术博客吧~