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

        x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;   
        y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;   
           
　　　　//获取两个点之间的剪辑区域四个端点   
        var aasin = a*Math.sin(Math.atan((y2-y1)/(x2-x1)));   
        var aacos = a*Math.cos(Math.atan((y2-y1)/(x2-x1)))   
        var x3 = x1+asin;   
        var y3 = y1-acos;   
        var x4 = x1-asin;   
        var y4 = y1+acos;   
        var x5 = x2+asin;   
        var y5 = y2-acos;   
        var x6 = x2-asin;   
        var y6 = y2+acos;   
           
　　　　//保证线条的连贯，所以在矩形一端画圆   
        ctx.save()   
        ctx.beginPath()   
        ctx.arc(x2,y2,a,0,2*Math.PI);   
        ctx.clip()   
        ctx.clearRect(0,0,canvas.width,canvas.height);   
        ctx.restore();   
       
　　　　//清除矩形剪辑区域里的像素   
        ctx.save()   
        ctx.beginPath()   
        ctx.moveTo(x3,y3);   
        ctx.lineTo(x5,y5);   
        ctx.lineTo(x6,y6);   
        ctx.lineTo(x4,y4);   
        ctx.closePath();   
        ctx.clip()   
        ctx.clearRect(0,0,canvas.width,canvas.height);   
        ctx.restore();