用HTML5 实现橡皮擦的涂抹效果的教程

        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){