canvas 橡皮擦解决滑动过快出现圆点问题_canvas 鼠标滑动快避免点线-优快云博客

本博客所有公开的原创博文皆允许转载，无须再征求作者本人（也就是我）同意

本文链接：https://blog.youkuaiyun.com/for_cxc/article/details/51003180

本文介绍了一种优化Canvas中触摸移动事件绘制体验的方法。通过计算触摸点间的直线，并在其上等距绘制多个圆来模拟平滑的轨迹，解决了快速滑动时出现间隔圆的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看第一段 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);