自制html5+canvas的刮刮卡效果

待我称王封你为后i 2022-06-06 07:39 233阅读 0赞

html部分

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"      //触点(鼠标)按下停留指定时间后全部消失
        });
    
    });