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

//通过修改globalCompositeOperation来达到擦除的效果 function tapClip(){

var hastouch = "ontouchstart" in window?true:false, tapstart = hastouch?"touchstart":"mousedown",

tapmove = hastouch?"touchmove":"mousemove", tapend = hastouch?"touchend":"mouseup";

canvas.addEventListener(tapstart , function(e){

　　　　 clearTimeout(timeout) e.preventDefault();

x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;

y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;

ctx.lineCap = "round";　　//设置线条两端为圆弧 ctx.lineJoin = "round";　　//设置线条转折为圆弧

ctx.lineWidth = a*2;　　 ctx.globalCompositeOperation = "destination-out";

ctx.save();

ctx.beginPath() ctx.arc(x1,y1,1,0,2*Math.PI);

ctx.fill(); ctx.restore();

canvas.addEventListener(tapmove , tapmoveHandler);

canvas.addEventListener(tapend , function(){ canvas.removeEventListener(tapmove , tapmoveHandler);

　　　　　　　timeout = setTimeout(function(){