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

}); 　　//鼠标移动时触发该事件

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;

　　　　//获取两个点之间的剪辑区域四个端点

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