javascript - Canvas - 有时使用 lineTo() 的笔画会产生边缘

Question

我有一个简单的 Canvas 绘图应用程序。 有时 lineTo() 命令会生成一条坐标较少的线，并且绘图有很多边:

我正在使用最新的 firefox，是因为连接不好还是我的电脑很忙？有解决办法吗？ 这是我的代码:JS FIDDLE

beginPath();
                moveTo(this.X, this.Y);
                lineTo(e.pageX , e.pageY );
                strokeStyle = "rgb(0,0,0)";
                ctx.lineWidth=3;
                stroke();

Answer 1

它正在尽可能快地响应。您的浏览器将尽可能快地传递事件，但不能以任何方式保证能够跟踪您移动鼠标。很大程度上与客户端计算机上的负载有关。

编辑 — here is a modified fiddle展示一些你可以让它变得更好的方法。该版本保留一个单独的“点”队列，每 50 毫秒绘制一次新点。这使得“mousemove”处理程序只需记录事件中的点坐标，当鼠标快速移动时，绘图代码可以通过一个 Canvas 更新来完成一堆点。它仍然不完美。

 var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var width  = window.innerWidth;
        var height = window.innerHeight;
        canvas.height = height;
        canvas.width = width;
        canvas.addEventListener('mousedown', function(e) {
            this.down = true;
            points.setStart(e.pageX, e.pageY);
        }, 0);
        canvas.addEventListener('mouseup', function() {
            this.down = false;          
        }, 0);
        canvas.addEventListener('mousemove', function(e) {          
            if (this.down) {
                points.newPoint(e.pageX, e.pageY);
            }
        }, 0);

var points = function() {
    var queue = [], qi = 0;
    var ctx = canvas.getContext('2d');

    function clear() {
        queue = [];
        qi = 0;
    }

    function setStart(x, y) {
        clear();
        newPoint(x, y);
    }

    function newPoint(x, y) {
        queue.push([x, y]);
    }

    function tick() {

        var k = 20; // adjust to limit points drawn per cycle

        if (queue.length - qi > 1) {
            ctx.beginPath();
            if (qi === 0)
                ctx.moveTo(queue[0][0], queue[0][1]);
            else
                ctx.moveTo(queue[qi - 1][0], queue[qi - 1][1]);

            for (++qi; --k >= 0 && qi < queue.length; ++qi) {
                ctx.lineTo(queue[qi][0], queue[qi][1]);
            }

            ctx.strokeStyle = "rgb(0,0,0)";
            ctx.lineWidth = 3;
            ctx.stroke();
        }
    }

    setInterval(tick, 50); // adjust cycle time

    return {
        setStart: setStart,
        newPoint: newPoint
    };
}();