自制html5+canvas的刮刮卡效果

最新推荐文章于 2019-12-27 10:31:59 发布

babulongbo

最新推荐文章于 2019-12-27 10:31:59 发布

阅读量485

点赞数 1

分类专栏： web开发笔记文章标签： html5 canvas html

本文链接：https://blog.csdn.net/babulongbo/article/details/78428010

版权

web开发笔记专栏收录该内容

64 篇文章 0 订阅

订阅专栏

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

});

babulongbo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自制html5+canvas的刮刮卡效果

html部分<head> <meta charset="utf-8"/>  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta content="width=devic
复制链接

扫一扫