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

                    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;   
        }   
    })   
}   

　　擦除那部分代码就这么一点，也就相当于画图功能，直接设置line属性后通过lineTo进行绘制线条，只要事前把globalCompositeOperation设成destination-out，你所进行的一切绘制，都变成了擦除效果。鼠标滑动触发的事件里面代码也少了很多，绘图对象的调用次数减少了，计算也减少了，性能提升大大滴。