HTML5刮奖效果，HTML5橡皮擦效果

    基于HTML5 CANVAS和JS的刮奖效果或橡皮擦效果，用鼠标在灰色蒙皮上进行擦拭，就能擦出美女哦！效果还是不错的，非常合适做刮刮乐等刮奖功能。
1、在head之间加入css代码（根据自己的需求进行修改）：

body {
    margin: 0;
    padding: 0;
}
.box {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: url("1.jpg") no-repeat;
    background-size: 100% 100%;
    backface-visibility: hidden;
    overflow: hidden;
}
#cas_keleyi_com {
    width: 100%;
    height: 100%;
    opacity: 1;
    -webkit-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -moz-transition: opacity .5s;
}
.noOp {
    opacity: 0 !important;
}

2、在使用的地方加入html

<div class="box" id="box">
    <canvas id="cas_keleyi_com"></canvas>
</div>

3、js代码：

var canvas = document.getElementById("cas_ke"+"leyi_com"),ctx = canvas.getContext("2d");
var x1,y1,a=30,timeout,totimes = 100,jiange = 30;
canvas.width = document.getElementById("box").clientWidth;
canvas.height = document.getElementById("box").clientHeight;
var img = new Image();
img.src = "2.jpg";
img.onload = function(){
    ctx.drawImage(img,0,0,canvas.width,canvas.height)
    //ctx.fillRect(0,0,canvas.width,canvas)
    tapClip()
}

//通过修改globalCompositeOperation来达到擦除的效果
function tapClip(){
    var hastouch = "ontouchstart" in window?true:false,
        tapstart = hastouch?"touchstart":"mousedown",
        tapmove = hastouch?"touchmove":"mousemove",
        tapend = hastouch?"touchend":"mouseup";

    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    ctx.lineWidth = a*2;
    ctx.globalCompositeOperation = "destination-out";

    canvas.addEventListener(tapstart , function(e){
        clearTimeout(timeout)
        e.preventDefault();

        x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
        y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;

        ctx.save();
        ctx.beginPath()
        ctx.arc(x1,y1,1,0,2*Math.PI);
        ctx.fill();
        ctx.restore();

        canvas.addEventListener(tapmove , tapmoveHandler);
        canvas.addEventListener(tapend , function(){
            canvas.removeEventListener(tapmove , tapmoveHandler);

            timeout = setTimeout(function(){
                var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
                var dd = 0;
                for(var x=0;x<imgData.width;x+=jiange){
                    for(var y=0;y<imgData.height;y+=jiange){
                        var i = (y*imgData.width + x)*4;
                        if(imgData.data[i+3] >0){
                            dd++
                        }
                    }
                }
                if(dd/(imgData.width*imgData.height/(jiange*jiange))<0.4){
                    canvas.className = "noOp";
                }
            },totimes)
        });
        function tapmoveHandler(e){
            clearTimeout(timeout)
            e.preventDefault()
            x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
            y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;

            ctx.save();
            ctx.moveTo(x1,y1);
            ctx.lineTo(x2,y2);
            ctx.stroke();
            ctx.restore()

            x1 = x2;
            y1 = y2;
        }
    })
}

//使用clip来达到擦除效果
function otherClip(){
    var hastouch = "ontouchstart" in window?true:false,
        tapstart = hastouch?"touchstart":"mousedown",
        tapmove = hastouch?"touchmove":"mousemove",
        tapend = hastouch?"touchend":"mouseup";

    canvas.addEventListener(tapstart , function(e){
        clearTimeout(timeout)
        e.preventDefault();

        x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
        y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;

        ctx.save()
        ctx.beginPath()
        ctx.arc(x1,y1,a,0,2*Math.PI);
        ctx.clip()
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.restore();

        canvas.addEventListener(tapmove , tapmoveHandler);
        canvas.addEventListener(tapend , function(){
            canvas.removeEventListener(tapmove , tapmoveHandler);

            timeout = setTimeout(function(){
                var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
                var dd = 0;
                for(var x=0;x<imgData.width;x+=jiange){
                    for(var y=0;y<imgData.height;y+=jiange){
                        var i = (y*imgData.width + x)*4;
                        if(imgData.data[i+3] >0){
                            dd++
                        }
                    }
                }
                if(dd/(imgData.width*imgData.height/(jiange*jiange))<0.4){
                    canvas.className = "noOp";
                }
            },totimes)

        });

        function tapmoveHandler(e){
            e.preventDefault()
            x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
            y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;

            var asin = a*Math.sin(Math.atan((y2-y1)/(x2-x1)));
            var acos = a*Math.cos(Math.atan((y2-y1)/(x2-x1)));
            var x3 = x1+asin;
            var y3 = y1-acos;
            var x4 = x1-asin;
            var y4 = y1+acos;
            var x5 = x2+asin;
            var y5 = y2-acos;
            var x6 = x2-asin;
            var y6 = y2+acos;

            ctx.save()
            ctx.beginPath()
            ctx.arc(x2,y2,a,0,2*Math.PI);
            ctx.clip()
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.restore();

            ctx.save()
            ctx.beginPath()
            ctx.moveTo(x3,y3);
            ctx.lineTo(x5,y5);
            ctx.lineTo(x6,y6);
            ctx.lineTo(x4,y4);
            ctx.closePath();
            ctx.clip()
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.restore();

            x1 = x2;
            y1 = y2;
        }
    })
}