Question

我正在尝试在光标位置绘制一个矩形（或其他路径）。

问题是，如果你足够快地移动鼠标，那么绘图会大大滞后于光标（追逐它）。

为了重现/测试问题，我尝试生成尽可能精简的代码。然而，由于渲染延迟，在光标和矩形之间仍然存在明显的差距，即使在具有不错规格的计算机上（Chrome Beta 37，Fedora 20，i7 4770k等）

任何人都可以为这个原因做出贡献，或建议改进以下代码以减少延迟：

var canvas = document.getElementsByTagName('canvas')[0];
var canvasDim = {
    width: canvas.width,
    height: canvas.height
};
var canvasOffset = canvas.getBoundingClientRect();

var context = canvas.getContext('2d');
context.stroke = "#000000";
context.fill = "#000000";

var currentPosition = {x:0, y:0};
var previousPosition = currentPosition;
var onlyClearPreviousPositon = true;

canvas.onmousemove = function(e){
    currentPosition = {
        x: e.clientX - canvasOffset.left,
        y: e.clientY - canvasOffset.top
    };
};
function drawAtCursor(){
    if (onlyClearPreviousPositon){
        // experiment - try not clearing the whole canvas 
        context.clearRect(previousPosition.x - 4, previousPosition.y - 4, 8, 8);
        previousPosition = currentPosition;
    } else {
        context.clearRect(0, 0, canvasDim.width, canvasDim.height);
    }
    context.fillRect(currentPosition.x - 4, currentPosition.y - 4, 8, 8);
    window.requestAnimationFrame(drawAtCursor);   
}

drawAtCursor();

Answer 1

这有一点点延迟，但在真正的应用程序中没用：

function handleMouseMove(e){
    ctx.clearRect(mouseX-1,mouseY-1,9,9);
    mouseX=e.clientX-offsetX;
    mouseY=e.clientY-offsetY;
    ctx.fillRect(mouseX,mouseY,8,8);
}

鼠标指针总是比绘图更快，所以你最好的选择不是让用户的眼睛有理由感知延迟：

在用户绘图时关闭鼠标光标。

http://jsfiddle.net/m1erickson/Cf5TX/

移动的矩形将充当鼠标光标，但如果用户需要可视指南，您可以：

还使用几行绘制十字准线。

在<canvas> </canvas>上跟随鼠标光标时的延迟

1 个答案: