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

1. timeout = setTimeout(function(){        var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);   
2.     var dd = 0;        for(var x=0;x<imgData.width;x+=30){   
3.         for(var y=0;y<imgData.height;y+=30){                var i = (y*imgData.width + x)*4;   
4.             if(imgData.data[i+3] >0){                    dd++   
5.             }            }   
6.     }        if(dd/(imgData.width*imgData.height/900)<0.4){   
7.         canvas.className = "noOp";        }   
8. },100)   

　　这样就可以较大限度的防止用户狂点击了，如果有其他更好的检查方法欢迎给出意见，谢谢。

　　到了这一步就都写完了，然后就是测试的时候了，结果并不乐观，在android上还是卡啊卡啊，所以又得另想办法，最终发现了绘图环境中的globalCompositeOperation这个属性，这个属性的默认值是source-over，也就是，当你在已有像素上进行绘图时会叠加，但是还有一个属性是destination-out，官方解释就是：在源图像外显示目标图像。只有源图像外的目标图像部分才会被显示，源图像是透明的。好像不太好理解，但是其实自己测试一下就会发现很简单，也就是在已有像素的基础上进行绘图时，你绘制的区域里的已有像素都会被置为透明，直接看张图更容易理解：

globalCompositeOperation属性效果图解。
有了这个属性后，就意味着不需要用到clip，也就不需要用sin、cos什么的计算剪辑区域，直接用条粗线就行了，这样一来就能够很大限度的降低了计算量，同时减少了绘图环境API的调用，性能提升了，在android上运行应该也会流畅很多，下面是修改后的代码：