javascript - 如何设置mousemove更新速度？

Question

我正在生成一个需要设置简单快速签名的函数。我正在 Canvas 字段中写签名。我用的是jQuery，但是mousemove坐标的刷新率不够快。发生的情况是，如果您将签名写入快速，您会在写入的像素之间看到一些空白。

如何更快地设置mousemove的刷新速度？

$("#xx").mousemove(function(e){

    ctx.fillRect(e.pageX - size, e.pageY - size, size, size);

    $("#pagex").html(e.pageX - size);
    $("#pagey").html(e.pageY - size);

}

Answer 1

你不能。 mousemove 事件由浏览器生成，因此您接收它们的速度与浏览器生成它们的速度一样快。

浏览器没有义务以任何给定的速率(通过移动的像素或耗时)生成事件:如果您快速移动鼠标，您将看到报告坐标的“跳跃”，因为浏览器正在报告“鼠标已经移动了，它现在在这里”，而不是“......并且穿过了这些像素”。事实上，速度较慢的计算机上的浏览器可能会生成较少的 mousemove 事件，以免页面减速到爬行。

您可以做的是将 mousemove 事件的连续位置与一条直线连接起来 - 这显然不会让您更加精确，但它可以减轻影响。