Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > HTML5实现移动设备的淘宝淘金币刮刮卡功能

    HTML5实现移动设备的淘宝淘金币刮刮卡功能

    HTML5 herman 4414浏览 0评论
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

    最近有人在论坛里提问，如何实现H5的刮刮卡功能？我之前做过两个demo，源码上传在csdn：demo
    我就特意整理写了这篇文章来实现刮刮卡的功能。因为刮刮卡的功能在生活中太常见了，比如我们上手机淘宝，蚂蚁花呗，淘宝淘金币刮刮卡，360手机登录后的刮奖等等都有刮刮卡的功能，所以我觉得它是有很大的价值的！先看下运行的效果：
    h5刮刮卡
    我们分析下设计思路：
    1.刮刮卡的灰色可刮区域，我们用canvas实现
    2.刮刮卡的滑动事件我们采用touchstart,touchend,touchmove,mousedown,mouseup,mousemove
    3.刮刮卡的滑块划过的区域变为透明
    4.刮刮卡整体90%的灰色刮掉算刮完成了
    全部代码如下：     

    <!DOCTYPE html>
<html>
<body>
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- 业余草：www.xttblog.com -->
<canvas id="xttblog"></canvas>
<script>
    (function(bodyStyle) {
        bodyStyle.mozUserSelect = 'none';
        bodyStyle.webkitUserSelect = 'none';

        var img = new Image();
        var canvas = document.querySelector('canvas');
        canvas.style.backgroundColor='transparent';
        canvas.style.position = 'absolute';

        img.addEventListener('load', function(e) {
            var ctx;
            var w = img.width,
                    h = img.height;
            var offsetX = canvas.offsetLeft,
                    offsetY = canvas.offsetTop;
            var mousedown = false;

            function layer(ctx) {
                ctx.fillStyle = 'gray';
                ctx.fillRect(0, 0, w, h);
            }

            function eventDown(e){
                e.preventDefault();
                mousedown=true;
            }

            function eventUp(e){
                e.preventDefault();
                mousedown=false;
            }

            function eventMove(e){
                e.preventDefault();
                if(mousedown) {
                    if(e.changedTouches){
                        e=e.changedTouches[e.changedTouches.length-1];
                    }
                    var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
                            y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
                    with(ctx) {
                        beginPath()
                        arc(x, y, 5, 0, Math.PI * 2);
                        fill();
                    }
                }
            }

            canvas.width=w;
            canvas.height=h;
            canvas.style.backgroundImage='url('+img.src+')';
            ctx=canvas.getContext('2d');
            ctx.fillStyle='transparent';
            ctx.fillRect(0, 0, w, h);
            layer(ctx);

            ctx.globalCompositeOperation = 'destination-out';

            canvas.addEventListener('touchstart', eventDown);
            canvas.addEventListener('touchend', eventUp);
            canvas.addEventListener('touchmove', eventMove);
            canvas.addEventListener('mousedown', eventDown);
            canvas.addEventListener('mouseup', eventUp);
            canvas.addEventListener('mousemove', eventMove);
        });
        img.src = 'http://sandbox.runjs.cn/uploads/rs/133/80kwuubo/574.png';
    })(document.body.style);
</script>
</body>
</html>

    点击此处查看运行效果

    版权声明：本文为博主原创文章，未经博主允许不得转载。

    业余草公众号

    最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

    本文原文出处：业余草： » HTML5实现移动设备的淘宝淘金币刮刮卡功能

    相关文章推荐