计算方法也很简单，因为可以知道两个剪辑区域连线两个端点的坐标，又知道我们要多宽的线条，矩形的四个端点坐标就变得容易求了，所以就有了下面的代码：
XML/HTML Code复制内容到剪贴板
- 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;
x1、y1和x2、y2就是两个端点，从而求出了四个端点的坐标。这样一来，剪辑区域就是圈加矩形，代码组织起来就是：
XML/HTML Code复制内容到剪贴板
- var hastouch = "ontouchstart" in window?true:false,//判断是否为移动设备
tapstart = hastouch?"touchstart":"mousedown",
- tapmove = hastouch?"touchmove":"mousemove",
tapend = hastouch?"touchend":"mouseup";
-
canvas.addEventListener(tapstart , function(e){
- e.preventDefault();
- x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;
-
//鼠标第一次点下的时候擦除一个圆形区域，同时记录第一个坐标点
- ctx.save()
ctx.beginPath()
- ctx.arc(x1,y1,a,0,2*Math.PI);
ctx.clip()
- ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.restore();
-
canvas.addEventListener(tapmove , tapmoveHandler);
- canvas.addEventListener(tapend , function(){
canvas.removeEventListener(tapmove , tapmoveHandler);
