自制html5+canvas的刮刮卡效果-蒲公英云

html部分

<head>
    <meta charset="utf-8"/>
    <!-- IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Fram -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <title>刮刮卡</title>
    <link rel="stylesheet" type="text/css" charset="utf-8" href="../../web/css/base.css">
    <link rel="stylesheet" type="text/css" charset="utf-8" href="../../web/css/media_phone.css">
    <link rel="stylesheet" type="text/css" charset="utf-8" href="../../web/css/clearCard.css">
</head>
<body>
    <div class="clearCard">
        <!-- 刮刮卡的画布 -->
        <canvas id="canvas">
        </canvas>
    </div>
    <script type="text/javascript" charset="utf-8" src="../../assets/jquery/jquery-3.2.1.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../web/js/jquery-clearCard.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../web/js/clearCard.js"></script>
</body>

jquery刮刮卡插件

//全局变量
var isClear = false;        //表示是否刮卡
;(function ($) { 
    $.fn.extend({
        'createCanvas': function (id, obj) { 
            //获取画布对象
            var canvas = document.getElementById(id);
            //设置样式
            setCanvasStyle(canvas, obj);
            if (canvas.getContext) {
                var ctx = setCanvas(canvas, "rect", obj['background-color']);
                canvasEvent(canvas, ctx, obj['step'], obj['time']);
            }
        }
    });
    /* *声明一个函数用于设置画布样式 *canvas表示画布 *obj表示用户定义的样式表 */
    function setCanvasStyle(canvas, obj) { 
        canvas.style.cursor = "pointer";
        canvas.style.backgroundImage = "url("+ obj['image'] + ")";
        canvas.style.backgroundRepeat = "no-repeat";
        canvas.style.backgroundPosition = "center center";
        canvas.style.backgroundSize = "contain";
        canvas.style.overflow = "hidden";
        canvas.style.border = obj['border'];
        canvas.style.width = obj['width'] || obj['height'];
        canvas.style.height = obj['height'] || obj['width'];
    }
    /* *声明一个函数用于设置画布的样式 *c表示画布的元素节点 *shape表示绘画的形状 *color表示画布上的颜色 */
    function setCanvas(c, shape, color) { 
        //设置shape和color的默认值
        if (!checkOptions(shape, "string")) {
            shape = "rect";
        }
        if(!checkOptions(color, "string")) {
            color = "gray";
        }
        var ctx = c.getContext("2d");
        ctx.fillStyle = color;
        ctx.beginPath();
        switch (shape) {
            case "rect":
                ctx.rect(0, 0, canvas.width, canvas.height);
                break;
            default:
                return ;
                break;
        }
        ctx.closePath();
        ctx.fill();
        return ctx;
    }
    /* *该函数用于处理用户的出发的事件 *canvas表示画布对象 *step表示触点所在正方形的宽度 */
    function canvasEvent(canvas, ctx, step, time) { 
        step -= 0;
        time -= 0;
        //给step和time设置默认值
        if (!checkOptions(step, "number", 0, 100)) {
            step = 5;
        }
        if (!checkOptions(time, "number", 0, 15000)) {
            time = 3000;
        }
        /* *该函数用于获取触点在画布上清除行为 *e表示触点默认传递的参数 *c表示设置的画布对象 *step表示触点所在正方形的宽度 */
        function clearCanvas(e) { 
            if (!isClear) {
                return ;
            }
            e.preventDefault();
            e.stopPropagation();
            //声明一个变量保存画布通过getBoundingClientRect获取的对象
            var box = canvas.getBoundingClientRect();
            //声明变量保存当前触点在画布上的准确位置
            var curX = 0, curY = 0;
            if (isPC) {
                e = e || window.event;
                curX = (e.clientX - box.left) * (canvas.width / box.width);
                curY = (e.clientY - box.top) * (canvas.height / box.height);
            } else {
                var touch = e.targetTouches[0];
                curX = (touch.pageX - box.left) * (canvas.width / box.width);
                curY = (touch.pageY - box.top) * (canvas.height / box.height);
            }
            ctx.clearRect(curX - step, curY - step, curX, curY);
            //定义一个定时器,判断鼠标在画布上悬浮的时间
            //如果大于规定的,则清除所有的图层,显示刮刮乐的背景图
            var timer = setTimeout(function () { 
                if (isClear) {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                }
                clearTimeout(timer);
            }, time);
        }
        if (isPC) {
            canvas.onmousedown = function () { 
                isClear = !isClear;
            }
            canvas.onmouseup = function () { 
                isClear = !isClear
            }
            canvas.onmousemove = function (e) { 
                clearCanvas(e);
            }
        } else {
            canvas.addEventListener("touchstart", function (e) { 
                isClear = !isClear;
            });
            canvas.addEventListener("touchend", function (e) { 
                isClear = !isClear;
            });
            canvas.addEventListener("touchmove", function (e) { 
                clearCanvas(e);
            }, false);
        }
    }
    /* *该函数用于判断当前设备是否是PC端 *如果返回true则表示当前在PC端 *否则当前再移动端 * */
    function isPC() { 
        var userAgentInfo = navigator.userAgent.toLowerCase();
        var Agents = new Array("android", "iphone", "symbianOS", "windows phone", "ipad", "ipod");
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) { 
                flag = false; break; 
            }
        }
        return flag;
    }
    /* *该函数用于判断是否满足指定类型,数字判断是否为数字以及超出最大值或最小值,字符串判断是否为空 *value表示要判断的值 *type表示要判断的类型 */
    function checkOptions(value, type, min, max) { 
        if (type === 'string') {
            if (value !== null || value !== value || value !== '') {
                return true;
            } else {
                return false;
            }
        } else if(type === 'number') {
            if (isNaN(value) || value<min || value>max) {
                return false;
            } else {
                return true;
            }
        }
    }
}(jQuery));

js引用插件

$(function () { 
    //canvas表示id名
    $(".clearCard").createCanvas("canvas", {
        "border": "1px solid #f2f2f2",
        "image": "../../web/img/rf-raffle3.jpg",    //画布下面的图片
        "width": "6rem",        //画布的宽
        //"height": "4rem", //画布的高
        "step": "20",           //触点(鼠标)点击每次消失正方形的宽度
        "time": "2000"      //触点(鼠标)按下停留指定时间后全部消失
    });
});