HTML5刮奖效果，HTML5橡皮擦效果_图像特效_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

特效介绍

基于HTML5 CANVAS和JS的刮奖效果或橡皮擦效果，用鼠标在灰色蒙皮上进行擦拭，就能擦出美女哦！效果还是不错的，非常合适做刮刮乐等刮奖功能。

使用方法

1、在head之间加入css代码（根据自己的需求进行修改）：

01body {
02    margin: 0;
03    padding: 0;
04}
05.box {
06    position: absolute;
07    left: 0;
08    top: 0;
09    bottom: 0;
10    right: 0;
11    background: url("1.jpg") no-repeat;
12    background-size: 100% 100%;
13    backface-visibility: hidden;
14    overflow: hidden;
15}
16#cas_keleyi_com {
17    width: 100%;
18    height: 100%;
19    opacity: 1;
20    -webkit-transition: opacity .5s;
21    -ms-transition: opacity .5s;
22    -moz-transition: opacity .5s;
23}
24.noOp {
25    opacity: 0 !important;
26}

2、在使用的地方加入html

1<div class="box" id="box">
2    <canvas id="cas_keleyi_com"></canvas>
3</div>

3、js代码：

001var canvas = document.getElementById("cas_ke"+"leyi_com"),ctx = canvas.getContext("2d");
002var x1,y1,a=30,timeout,totimes = 100,jiange = 30;
003canvas.width = document.getElementById("box").clientWidth;
004canvas.height = document.getElementById("box").clientHeight;
005var img = new Image();
006img.src = "2.jpg";
007img.onload = function(){
008    ctx.drawImage(img,0,0,canvas.width,canvas.height)
009    //ctx.fillRect(0,0,canvas.width,canvas)
010    tapClip()
011}
012 
013//通过修改globalCompositeOperation来达到擦除的效果
014function tapClip(){
015    var hastouch = "ontouchstart" in window?true:false,
016        tapstart = hastouch?"touchstart":"mousedown",
017        tapmove = hastouch?"touchmove":"mousemove",
018        tapend = hastouch?"touchend":"mouseup";
019 
020    ctx.lineCap = "round";
021    ctx.lineJoin = "round";
022    ctx.lineWidth = a*2;
023    ctx.globalCompositeOperation = "destination-out";
024 
025    canvas.addEventListener(tapstart , function(e){
026        clearTimeout(timeout)
027        e.preventDefault();
028 
029        x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
030        y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;
031 
032        ctx.save();
033        ctx.beginPath()
034        ctx.arc(x1,y1,1,0,2*Math.PI);
035        ctx.fill();
036        ctx.restore();
037 
038        canvas.addEventListener(tapmove , tapmoveHandler);
039        canvas.addEventListener(tapend , function(){
040            canvas.removeEventListener(tapmove , tapmoveHandler);
041 
042            timeout = setTimeout(function(){
043                var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
044                var dd = 0;
045                for(var x=0;x<imgData.width;x+=jiange){
046                    for(var y=0;y<imgData.height;y+=jiange){
047                        var i = (y*imgData.width + x)*4;
048                        if(imgData.data[i+3] >0){
049                            dd++
050                        }
051                    }
052                }
053                if(dd/(imgData.width*imgData.height/(jiange*jiange))<0.4){
054                    canvas.className = "noOp";
055                }
056            },totimes)
057        });
058        function tapmoveHandler(e){
059            clearTimeout(timeout)
060            e.preventDefault()
061            x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
062            y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;
063 
064            ctx.save();
065            ctx.moveTo(x1,y1);
066            ctx.lineTo(x2,y2);
067            ctx.stroke();
068            ctx.restore()
069 
070            x1 = x2;
071            y1 = y2;
072        }
073    })
074}
075 
076//使用clip来达到擦除效果
077function otherClip(){
078    var hastouch = "ontouchstart" in window?true:false,
079        tapstart = hastouch?"touchstart":"mousedown",
080        tapmove = hastouch?"touchmove":"mousemove",
081        tapend = hastouch?"touchend":"mouseup";
082 
083    canvas.addEventListener(tapstart , function(e){
084        clearTimeout(timeout)
085        e.preventDefault();
086 
087        x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
088        y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;
089 
090        ctx.save()
091        ctx.beginPath()
092        ctx.arc(x1,y1,a,0,2*Math.PI);
093        ctx.clip()
094        ctx.clearRect(0,0,canvas.width,canvas.height);
095        ctx.restore();
096 
097        canvas.addEventListener(tapmove , tapmoveHandler);
098        canvas.addEventListener(tapend , function(){
099            canvas.removeEventListener(tapmove , tapmoveHandler);
100 
101            timeout = setTimeout(function(){
102                var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
103                var dd = 0;
104                for(var x=0;x<imgData.width;x+=jiange){
105                    for(var y=0;y<imgData.height;y+=jiange){
106                        var i = (y*imgData.width + x)*4;
107                        if(imgData.data[i+3] >0){
108                            dd++
109                        }
110                    }
111                }
112                if(dd/(imgData.width*imgData.height/(jiange*jiange))<0.4){
113                    canvas.className = "noOp";
114                }
115            },totimes)
116 
117        });
118 
119        function tapmoveHandler(e){
120            e.preventDefault()
121            x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
122            y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;
123 
124            var asin = a*Math.sin(Math.atan((y2-y1)/(x2-x1)));
125            var acos = a*Math.cos(Math.atan((y2-y1)/(x2-x1)));
126            var x3 = x1+asin;
127            var y3 = y1-acos;
128            var x4 = x1-asin;
129            var y4 = y1+acos;
130            var x5 = x2+asin;
131            var y5 = y2-acos;
132            var x6 = x2-asin;
133            var y6 = y2+acos;
134 
135            ctx.save()
136            ctx.beginPath()
137            ctx.arc(x2,y2,a,0,2*Math.PI);
138            ctx.clip()
139            ctx.clearRect(0,0,canvas.width,canvas.height);
140            ctx.restore();
141 
142            ctx.save()
143            ctx.beginPath()
144            ctx.moveTo(x3,y3);
145            ctx.lineTo(x5,y5);
146            ctx.lineTo(x6,y6);
147            ctx.lineTo(x4,y4);
148            ctx.closePath();
149            ctx.clip()
150            ctx.clearRect(0,0,canvas.width,canvas.height);
151            ctx.restore();
152 
153            x1 = x2;
154            y1 = y2;
155        }
156    })
157}