Html5实现移动端、PC端 刮刮卡效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>小月博客刮刮卡案例分享</title>
        <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            body{
                background: #df412b;
                position: relative;
            }
            .banner1{
                display: block;
                width: 100%;
                height: auto;
                overflow: hidden;
            }
            .ggl{
                position: relative;
                width: 85.6%;
                height: 90px;
                margin: -5px auto;
                background: url(img/ggl.png) no-repeat center center;
                background-size: 100% 100%;
            }
            .canvas{
                position:absolute;
                top:2px;
                left:2.5%;
                width:95%;
                height:82px;
                line-height:82px;
                text-align:center;
                z-index: 2;
                
            }
            .info{
                position:absolute;
                top:2px;
                left:2.5%;
                width:95%;
                height:82px;
                text-align:center;
            }
            .info span{
                display: block;
                font-size: 18px;
            }
            #prompt{
                line-height: 40px;
            }
            .btn{
                position: relative;
                width: 50%;
                height: 35px;
                line-height: 35px;
                background: #df412b;
                color: #fff;
                border-radius: 5px;
                margin: 0 auto;
                z-index: 1;
            }
            .guize{
                display: block;
                width: 85.6%;
                height: auto;
                margin: 5% auto 10% auto;
                border-radius: 5px;
            }
            .num{
                width: 100%;
                height: 30px;
                line-height: 30px;
                text-align: center;
                font-size:14px;
                margin-top: 5%;
            }
            #ok, #no{display: none;}
            .pop{
                position: fixed;
                 left: 0;
                 top: 0;
                 z-index: 3;
                 width: 100%;
                 height: 100%;
                 background: rgba(0,0,0,0.6);
                 display: none;
            }
            .pop img{
                width: 100%;
                height: auto;
                overflow: hidden;
                margin: 15% auto;
            }
        </style>
    </head>
    <body>
        <img src="img/banner1.png" class="banner1"/>
        <div class="ggl" id="top">
            <div class="info" id="prize">
                <span id="prompt"></span>
                <span class="btn" id="ok">领取奖品</span>
                <span class="btn" id="no">再来一次</span>
            </div>
            <canvas id="c1" class="canvas"></canvas>
        </div>
        <div class="num">
            您还有<span class="num1"></span>次刮卡机会
        </div>
        <img src="img/guize.png" class="guize" />
        
        <!-- 遮罩层1抽奖次数已经用完-->
        <div class="pop pop1">
            <img src="img/pop1.png" />
        </div>
        <div class="pop pop2">
            <img src="img/pop2.png" id="pop2" />
        </div>
        <script>
            //控制刮卡次数
            var t = 1; 
            //初始化所有数据并且随机产生奖品
            var initialize  = function () {
                //剩余刮卡次数
                $('.num1').html(4-t);
                //随机数
                function getRandomNum(lbound, ubound) {
                    return (Math.floor(Math.random() * (ubound - lbound)) + lbound);
                }
                var r = getRandomNum(1,100);
                var btn = document.getElementsByClassName("btn");
                for(var i=0; i<btn.length; i++){
                    btn[i].style.zIndex = '1';
                }
                document.getElementById("no").style.display = "none";
                document.getElementById("ok").style.display = "none";
                
                //初始化涂抹面积
                isOk = 0;
                
                
                if(r<t*33){
                    document.getElementById("prompt").innerHTML="恭喜您,中奖了!"
                    var ok =document.getElementById("ok");
                    ok.style.display = "block";
                    //点击领取奖品
                    ok.onclick = function () {
                        window.location.href="prize.html"
                    };
                }else{
                    document.getElementById("prompt").innerHTML="很遗憾,未中奖!"
                    document.getElementById("no").style.display = "block";
                }
            };
        
            var c1;                //画布
            var ctx;            //画笔
            var ismousedown;    //标志用户是否按下鼠标或开始触摸
            var isOk=0;            //标志用户是否已经刮开了一半以上
            var fontem = parseInt(window.getComputedStyle(document.documentElement, null)["font-size"]);//这是为了不同分辨率上配合@media自动调节刮的宽度

            /* 页面加载后开始初始化画布 */
            window.onload = function(){    
                initialize();
                c1 = document.getElementById("c1");
                
                //这里很关键,canvas自带两个属性width、height,我理解为画布的分辨率,跟style中的width、height意义不同。
                //最好设置成跟画布在页面中的实际大小一样
                //不然canvas中的坐标跟鼠标的坐标无法匹配
                c1.width=c1.clientWidth;
                c1.height=c1.clientHeight;
                ctx = c1.getContext("2d");
                
                //PC端的处理
                c1.addEventListener("mousemove",eventMove,false);
                c1.addEventListener("mousedown",eventDown,false);
                c1.addEventListener("mouseup",eventUp,false);
            
                //移动端的处理
                c1.addEventListener('touchstart', eventDown,false);
                c1.addEventListener('touchend', eventUp,false);
                c1.addEventListener('touchmove', eventMove,false);
                
                //初始化
                initCanvas();
            }

            //初始化画布,画灰色的矩形铺满
            function initCanvas(){
                //网上的做法是给canvas设置一张背景图片,我这里的做法是直接在canvas下面另外放了个div。
                //c1.style.backgroundImage="url(中奖图片.jpg)";
                ctx.globalCompositeOperation = "source-over";
                ctx.fillStyle = '#aaaaaa';
                ctx.fillRect(0,0,c1.clientWidth,c1.clientHeight);
                ctx.fill();
                
                ctx.font = "Bold 30px Arial";
                        ctx.textAlign = "center";
                        ctx.fillStyle = "#999999";
                        ctx.fillText("刮一刮",c1.width/2,50);
                
                //把这个属性设为这个就可以做出圆形橡皮擦的效果
                //有些老的手机自带浏览器不支持destination-out,下面的代码中有修复的方法
                ctx.globalCompositeOperation = 'destination-out';
            }

            //鼠标按下 和 触摸开始
            function eventDown(e){
                e.preventDefault();
                ismousedown=true;
            }
            
            //鼠标抬起 和 触摸结束
            function eventUp(e){
                e.preventDefault();
                
                //得到canvas的全部数据
                var a = ctx.getImageData(0,0,c1.width,c1.height);
                var j=0;
                for(var i=3;i<a.data.length;i+=4){
                        if(a.data[i]==0)j++;
                }
                //当被刮开的区域等于一半时,则可以开始处理结果
                if(j>=a.data.length/8){
                    isOk = 1;
                }
                ismousedown=false;
            }
            
            //鼠标移动 和 触摸移动
            function eventMove(e){
                 e.preventDefault();
                if(ismousedown) {
                     if(e.changedTouches){
                         e=e.changedTouches[e.changedTouches.length-1];
                     }
                var topY = document.getElementById("top").offsetTop;
                var oX = c1.offsetLeft,
                    oY = c1.offsetTop+topY;
                
                var x = (e.clientX + document.body.scrollLeft || e.pageX) - oX || 0,
                    y = (e.clientY + document.body.scrollTop || e.pageY) - oY || 0;
            
                    //画360度的弧线,就是一个圆,因为设置了ctx.globalCompositeOperation = 'destination-out';
                    //画出来是透明的
                     ctx.beginPath();
                     ctx.arc(x, y, fontem*1.2, 0, Math.PI * 2,true);
                     
                     //下面3行代码是为了修复部分手机浏览器不支持destination-out
                     //我也不是很清楚这样做的原理是什么
                     c1.style.display = 'none';
                     c1.offsetHeight;
                     c1.style.display = 'inherit'; 
                     
                     ctx.fill();
                }
                
                if(isOk){
                    var btn = document.getElementsByClassName("btn");
                    for(var i=0; i<btn.length; i++){
                        btn[i].style.zIndex = '3';
                    }
                    document.getElementsByClassName("btn")[0].style.zIndex="3";
                }
            }
            
            //没有中奖再来一次
            $("#no").click(function() {
                if(t>3){
                    //因该弹出遮罩层提示您的次数已经用完了
                    $('.pop1').show();
                    $('.pop1 img').click(function(){
                        $('.pop1').hide();
                    })
                }else{
                    t++;
                    //初始化按钮
                    document.getElementById("no").style.display = "none";
                    document.getElementById("ok").style.display = "none";
                    window.onload();
                    initCanvas();
                    
                }
            });
            

        </script>
            
    </body>

</html>

猜你喜欢

转载自my.oschina.net/u/3449950/blog/1791891

相关文章