维多利亚的秘密微信推广广告模仿-刮刮卡-CSDN博客

原文链接：http://blog.csdn.net/jasondu264/article/details/38064147

看到这个效果，一开始是想一定是用canvas啦，可以建一个蒙版，然后使用擦除就搞定了，但试了一下不行，如果擦除的速度快就会出现一个个不连续的块；

正确的方式是使用绘制线，但将线绘制在蒙版上也不是我们的目的，我们需要的是和蒙版做差值运算，这样才能有擦除的效果；还有一个问题，我们是通过多条线连接来实现的，默认线的连接是不平滑的，这时我们需要设置一个属性：context2D.lineJoin = "round"，下面是具体的编码：

[javascript]view plaincopy 
   
 <!DOCTYPE HTML>  
 <html>  
 <head>  
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, minimal-ui">  
     <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
 </head>  
 <body>  
 <canvas id="canvas">  
     <p>Your browserdoes not support the canvas element!</p>  
 </canvas>  
 <image id="image" src="http://img0.bdstatic.com/img/image/shouye/mnqz-9561341778.jpg"></image>  
 </body>  
 </html>  
 <style type="text/css">  
     body {  
         margin: 0;  
         padding: 0;  
     }  
     canvas {  
         position: absolute;  
         -webkit-transition: all 0.8s;  
     }  
     .canvas_hide {  
         opacity: 0;  
     }  
 </style>  
 <script type="text/javascript">  
     var canvas =document.getElementById("canvas");  
     var context2D =canvas.getContext("2d");  
     var array_paint = [];  
     var height = document.documentElement.clientHeight,  
         width = document.documentElement.clientWidth;  
     // 绘制蒙版  
     function draw(height, width) {  
         context2D.clearRect(0,0, canvas.width, canvas.height);  
         context2D.globalAlpha = 0.8  
         context2D.fillStyle ="#FF0000";  
         context2D.fillRect(0, 0, width, height);  
         context2D.fill();  
     }  
     // 绘制线  
     function paint () {  
         // 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。也就是取余  
         context2D.globalCompositeOperation = 'destination-out';  
         context2D.globalAlpha = 1;  
         context2D.strokeStyle ="#ffffff";  
         context2D.lineWidth = 20;  
         context2D.lineJoin = "round";   // 当两条线条交汇时，创建圆形边角  
   
         for(var i=0; i < array_paint.length; i++)//循环数组  
         {  
             context2D.beginPath();  
             if(array_paint[i] && i){//当是拖动而且i!=0时，从上一个点开始画线。  
                 context2D.moveTo(array_paint[i-1][0], array_paint[i-1][1]);  
             }else{  
                 context2D.moveTo(array_paint[i][0], array_paint[i][1]);  
             }  
             context2D.lineTo(array_paint[i][0], array_paint[i][1]);  
             context2D.closePath();  
             context2D.stroke();  
         }  
     }  
     // 计算擦除的百分比  
     function getTransparentPercent(ctx, width, height) {  
         // 通过判断每个像素点来计算百分比  
         var imgData = ctx.getImageData(0, 0, width, height),  
                 pixles = imgData.data,  
                 transPixs = [];  
         for (var i = 0, j = pixles.length; i < j; i += 4) {  
             var a = pixles[i + 3];  
             if (a < 128) {  
                 transPixs.push(i);  
             }  
         }  
         return (transPixs.length / (pixles.length / 4) * 100).toFixed(2);  
     };  
     $(document).ready(function () {  
         $('#image').css({  
             height: height+'px',  
             width: width+'px'  
         })  
         $('canvas').attr({  
             height: height+'px',  
             width: width+'px'  
         })  
         draw(height, width);  
         $('canvas')  
                 .on('touchmove', function (event) {  
                     event.preventDefault();  
                     var x = event.originalEvent.targetTouches[0].clientX,  
                             y = event.originalEvent.targetTouches[0].clientY;  
                     array_paint.push([x, y]);  
                     paint();  
                 })  
                 .on('touchend', function () {  
                     array_paint = [];  
                     var percent = getTransparentPercent(context2D, width, height);  
                     console.log(percent);  
                     if(percent > 20){  
                         $('canvas').addClass('canvas_hide');  
                     }  
                 });  
     })  
 </script>  