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

           
　　　　//记录最后坐标   
        x1 = x2;   
        y1 = y2;   
    }   
})  

　　如此一来，鼠标擦除的效果就实现了，不过还有一个要实现的点，就是大部分擦除的效果，当你擦了一定数量的像素后，就会自动把所有图片内容呈现出来，这个效果，我是用imgData来实现的。代码如下：
复制代码

XML/HTML Code复制内容到剪贴板

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

　　获取到imgData，对imgData里的像素进行遍历，然后再对imgData的data数组里的rgba中的alpha进行分析，也就是分析透明度，如果像素被擦除了，那透明度就是0了，也就是把当前画布中透明度不为0的像素的数量跟画布总像素数进行比较，如果透明度不为0 的像素数比例低于40%，那说明当前画布上就以后有百分六十以上的区域被擦除了，就可以自动呈现图片了。

　　此处注意，我是把检查像素这段代码方法mouseup事件里面的，因为这个计算量相对来说还是不小，如果用户狂点鼠标，就会狂触发mouseup事件，也就是会疯狂的触发那个循环计算像素，计算量大到阻塞进程，导致界面卡住的情况，缓解办法如下：加个timeout，延迟执行像素计算，而在每一次点击的时候再清除timeout，也就是如果用户点击很快，这个计算也就触发不了了，还有一个提升的办法就是抽样检查，我上面的写法是逐个像素检查，逐个像素检查的话像素量太大，肯定会卡的，所以可以采用抽样检查，比如每隔30个像素检查一次，修改后的代码如下：
复制代码

XML/HTML Code复制内容到剪贴板

timeout = setTimeout(function(){   
    var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);