canvas 橡皮擦效果制作

擦除一定数量后全部消失的有用 imageData 方法的 我把代码贴在最下面

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            body{
                overflow: hidden;
            }
            #canvas{
                display: block;
                margin: 0 auto;
                border: 2px solid #008000;
                background: url(img2.jpg) no-repeat;
                background-size: cover;
            }
            *{margin: 0;padding: 0;}
        </style>
    </head>
    <body>
        
        <canvas id="canvas" width="800" height="400"></canvas>
        
    </body>
    
    <script type="text/javascript">
        
        var cvs = document.getElementById('canvas');
        var ctx = cvs.getContext('2d');
        
        cvs.width = window.innerWidth;
        cvs.height = window.innerHeight;
        
        var cvsWidth = cvs.width;
        var cvsHeight = cvs.height;
        var iNow = false;
        var r = 30;
        var num = 0;
        var img =new Image()
        img.src="img1.jpg"        


        var hastouch = "ontouchstart" in window?true:false,
            tapstart = hastouch?"touchstart":"mousedown",
            tapmove = hastouch?"touchmove":"mousemove",
            tapend = hastouch?"touchend":"mouseup";
            
        img.onload = function(){
            bottomImg();
            clickDraw();            
        }
        function bottomImg(){
            ctx.drawImage(img,0,0,cvsWidth,cvsHeight)
        }
        function clickDraw(){
            cvs.addEventListener(tapstart,function(e){
                
                e.preventDefault();  
                  
                x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;  
                y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;  
                  
                ctx.lineCap = "round";　　//设置线条两端为圆弧  
                ctx.lineJoin = "round";　　//设置线条转折为圆弧  
                ctx.lineWidth = r*2;　　  
                ctx.globalCompositeOperation = "destination-out";  
                  
                ctx.save();  
                ctx.beginPath()  
                ctx.arc(x1,y1,1,0,2*Math.PI);  
                ctx.fill();  
                ctx.restore();                  
                
                iNow = true;
                cvs.addEventListener(tapmove,function(e){
                    e.preventDefault()
                    if( iNow ){
                        var lx = hastouch?e.targetTouches[0].pageX:e.clientX-cvs.offsetLeft;
                        var ly = hastouch?e.targetTouches[0].pageY:e.clientY-cvs.offsetTop;
                        round(lx,ly)
                        num++
                        console.log(num);
                        num>500?ctx.clearRect(0,0,cvsWidth,cvsHeight):''
                    }
                })
            })
            cvs.addEventListener(tapend,function(){
                iNow = false;
            })
        }
        function round(ex,ey){ 
            x2 = ex 
            y2 = ey
              
            ctx.save();  
            ctx.moveTo(x1,y1);  
            ctx.lineTo(x2,y2);  
            ctx.stroke();  
            ctx.restore()  
              
            x1 = x2;  
            y1 = y2;             
        }
        
    </script>
</html>

 

以下是使用getImageData方式消除剩余部分

 

//通过修改globalCompositeOperation来达到擦除的效果
function tapClip(){
    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.lineCap = "round";　　//设置线条两端为圆弧
        ctx.lineJoin = "round";　　//设置线条转折为圆弧
        ctx.lineWidth = a*2;　　
        ctx.globalCompositeOperation = "destination-out";
        
        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+=30){
                for(var y=0;y<imgData.height;y+=30){
                    var i = (y*imgData.width + x)*4;
                    if(imgData.data[i+3] > 0){
                        dd++
                    }
                }
            }
            if(dd/(imgData.width*imgData.height/900)<0.4){
                canvas.className = "noOp";
            }
　　　　　　　},100)
        });
        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;
            
            ctx.save();
            ctx.moveTo(x1,y1);
            ctx.lineTo(x2,y2);
            ctx.stroke();
            ctx.restore()
            
            x1 = x2;
            y1 = y2;
        }
    })
}

 

posted @ 2016-04-03 16:44  cench  阅读(891)  评论(0)  编辑  收藏  举报