我为这个网站写了一个小图画脚本(画布)：
http://scri.ch/
当您单击文档时,每个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触发速度？
是否可以随时“请求”鼠标位置？
感谢您的意见！
解决方法
如果你想增加报告频率,恐怕你没有运气.小鼠每秒只会向操作系统报告他们的位置n次,我认为n通常小于100.(如果有人可以使用实际规格确认,请随意添加它们！)
所以为了得到一个顺利的线,你必须提出一些插值方案.有很多关于这个话题的文学;我推荐monotone cubic interpolation,因为它是本地的,简单的实现,非常稳定(没有超调).
然后,一旦计算了样条曲线,您可以使用足够短的线段逼近它,使其看起来光滑,或者您可以全面输出并编写自己的Bresenham算法来绘制.
如果所有这一切都值得一个简单的绘图应用程序…这当然是你决定的.
