canvas 橡皮擦 解决滑动过快出现圆点问题

先看第一段 js 代码 

canvas.addEventListener('touchmove', function (e) {
ctx.beginPath();
ctx.arc(e.targetTouches[0].clientX, e.targetTouches[0].clientY, 25, 0, 2 * Math.PI);
ctx.fill();
});

</pre><p></p><pre>

很简单的代码 ，每次触发 touchmove 事件 画一个圆擦去canvas背景，但是如果手指滑动过快，获取的鼠标点间距就会太大，那么会出现间隔的圆，用户体验较差。

第二段 js 代码 ，解决这个问题，但是加了点算法，时间空间复杂度也大，换来好的用户体验

var flag = true;
canvas.addEventListener('touchmove', function (e) {
setTimeout(function () {
if (flag) {     //第一次触发 只记录p1点
flag = false;
p1 = new point(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
return;
}
p2 = new point(e.targetTouches[0].clientX, e.targetTouches[0].clientY);  //后面n次触发 记录p2点
k = (p2.y - p1.y) / (p2.x - p1.x);   // p1 p2直线斜率
b = p1.y - k * p1.x;                 //y = kx + b 的 b
var d = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)); //两点之间的距离
var num = d * 0.2;   //两点之间要画多少个圆才能看起来像条平滑直线，0.2 是平均每像素的距离 画0.2个圆，100像素的距离画20个圆足够
//注意 这里圆点半径为15 - 25像素适应
var x = p1.x, y = p1.y;   //第一个圆的位置
var n = (p2.x - p1.x) / num;//每个圆心之间的间距
for (var i = 0; i < num; i++) {   //依次在这条直线上画 num 个圆
ctx.beginPath();
ctx.arc(x, y, 25, 0, 2 * Math.PI);
ctx.fill();
x += n;
y = k * x + b;
}
p1 = p2;  //最后 将p2 赋给 p1
}, 1);

});
canvas.addEventListener('touchend', function (e) {  //最后手指弹起重新开始
flag = true;
}, 1);