当您单击文档时,每个mousemove事件基本上执行以下操作：
– 获取坐标.
– 这个点和上一个之间的context.lineTo()
– context.stroke()行

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

伪码：

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

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

因此,每次触发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事件.

所以,在我花了一些时间来实现无用的优化之后,轮到你了：有没有办法优化DOM脚本中的mousemove触发速度？

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

感谢您的意见！