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

最近项目刚好用到这种效果，也就是有点像刮刮卡一样，在移动设备上，把某张图片刮掉显示出另一张图片。效果图如下：

DEMO请戳右：DEMO 
这种在网上还是挺常见的，本来就想直接网上找个demo套用下他的方法就行了，套用了才发现，在android上卡出翔了，因为客户要求，在android不要求特别流畅，至少要能玩，但是网上找的那个demo实在太卡，根本就是没法玩的情况。于是就想自己写一个算了，本文也就权当记录一下研究过程。

　　这种刮图的效果，首先想到就是用HTML5的canvas来实现，而canvas的API中，可以清除像素的就是clearRect方法，但是clearRect方法的清除区域矩形，毕竟大部分人的习惯中的橡皮擦都是圆形的，所以就引入了剪辑区域这个强大的功能，也就是clip方法。用法很简单：　

1. ctx.save()   
2. ctx.beginPath()   
3. ctx.arc(x2,y2,a,0,2*Math.PI);   
4. ctx.clip()   
5. ctx.clearRect(0,0,canvas.width,canvas.height);   
6. ctx.restore();   

　　上面那段代码就实现了圆形区域的擦除，也就是先实现一个圆形路径，然后把这个路径作为剪辑区域，再清除像素就行了。有个注意点就是需要先保存绘图环境，清除完像素后要重置绘图环境，如果不重置的话以后的绘图都是会被限制在那个剪辑区域中。

　　擦除效果有了，现在就是写鼠标移动擦除的效果了，下面我均用鼠标来描述，因为移动端也差不多，就是把mousedown换成touchstart，mousemove换成touchmove，mouseup换成touchend、以及获取坐标点由e.clientX换成e.targetTouches[0].pageX而已。

　　实现鼠标移动擦除，刚开始就是想到鼠标移动时在触发的mousemove事件中对鼠标所在位置进行圆形区域擦除，写出来后发现，当鼠标移动速度很快的时候，擦除的区域就不连贯了，就会出现下面这种效果，这显然不是我们想要的橡皮擦擦除效果。

既然所有点不连贯，那接下来要做的事就是把这些点连贯起来，如果是实现画图功能的话，就可以直接通过lineTo把两点之间连接起来再绘制，但是擦除效果中的剪辑区域要求要是闭合路径，如果是单纯的把两个点连起来就无法形成剪辑区域了。然后我就想到用计算的方法，算出两个擦除区域中的矩形四个端点坐标来实现，也就是下图中的红色矩形：

计算方法也很简单，因为可以知道两个剪辑区域连线两个端点的坐标，又知道我们要多宽的线条，矩形的四个端点坐标就变得容易求了，所以就有了下面的代码：
XML/HTML Code复制内容到剪贴板

1. var aasin = a*Math.sin(Math.atan((y2-y1)/(x2-x1)));   
2. var aacos = a*Math.cos(Math.atan((y2-y1)/(x2-x1)))   
3. var x3 = x1+asin;   
4. var y3 = y1-acos;   
5. var x4 = x1-asin;   
6. var y4 = y1+acos;   
7. var x5 = x2+asin;   
8. var y5 = y2-acos;   
9. var x6 = x2-asin;   
10. var y6 = y2+acos;   

　　x1、y1和x2、y2就是两个端点，从而求出了四个端点的坐标。这样一来，剪辑区域就是圈加矩形，代码组织起来就是：
XML/HTML Code复制内容到剪贴板

1. var hastouch = "ontouchstart" in window?true:false,//判断是否为移动设备   
2.     tapstart = hastouch?"touchstart":"mousedown",   
3.     tapmove = hastouch?"touchmove":"mousemove",   
4.     tapend = hastouch?"touchend":"mouseup";   
5.   
6. canvas.addEventListener(tapstart , function(e){   
7.     e.preventDefault();   
8.        
9.     x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;   
10.     y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;   
11.        
12. 　　//鼠标第一次点下的时候擦除一个圆形区域，同时记录第一个坐标点   
13.     ctx.save()   
14.     ctx.beginPath()   
15.     ctx.arc(x1,y1,a,0,2*Math.PI);   
16.     ctx.clip()   
17.     ctx.clearRect(0,0,canvas.width,canvas.height);   
18.     ctx.restore();   
19.        
20.     canvas.addEventListener(tapmove , tapmoveHandler);