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

HTML5 herman 2295浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

最近有人在论坛里提问,如何实现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)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

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