小编bpi*_*rre的帖子

我为这个网站写了一个小小的绘图脚本(画布):http://scri.ch/

单击文档时,每个mousemove事件基本上执行以下操作:
- 获取坐标.
- context.lineTo()在这一点和前一点之间
- context.stroke()线

如您所见,如果您非常快速地移动光标,则事件不会触发(取决于您的CPU /浏览器/等),并且会跟踪直线.

在伪代码中:

window.addEventListener('mousemove', function(e){
  myContext.lineTo(e.pageX, e.pageY);
  myContext.stroke();
}, false);

这是一个已知的问题,解决方案很好,但我想优化它.

因此,stroke()每次触发mousemove事件时,我都会将新坐标放入数组队列中,并使用计时器定期绘制/清空它.

在伪代码中:

var coordsQueue = [];

window.addEventListener('mousemove', function(e){
  coordsQueue.push([e.pageX, e.pageY]);
}, false);

function drawLoop(){
  window.setTimeout(function(){
    var coords;
    while (coords = coordsQueue.shift()) {
      myContext.lineTo(coords[0], coords[1]);
    }
    myContext.stroke();
    drawLoop();
  }, 1000); // For testing purposes
}

但它没有改善这条线.所以我试着只说明一点mousemove.相同的结果:点之间的空间太大.

它让我意识到第一个代码块足够高效,它只是mousemove触发太慢的事件.

因此,在我花了一些时间实现无用的优化之后,轮到你了:有没有办法优化mousemoveDOM脚本中的触发速度？

是否可以随时"请求"鼠标位置？

谢谢你的建议!