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

这是我参与更文挑战的第23天，活动详情查看：更文挑战

前言

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

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

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

需求

之前有个需求，是要求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>

复制代码