Javascript步骤事件与鼠标

Javascript step event with mouse

本文关键字：鼠标 事件 Javascript      更新时间：2023-09-26

我是一个画布新手，我想知道如何获得"步骤"事件(例如每半秒执行一次)，同时能够参考鼠标位置，例如，如果我想在鼠标位置每0.5秒独立于鼠标移动绘制一些东西。

您必须将mousemove事件全局绑定到文档主体，并将鼠标位置保存为可公开访问的变量(如window.mouseX和window.mouseY)。然后在setInterval(function () { ... }, 500);中，您可以检索window.mouseX和window.mouseY的值。

据我所知，除了不断地全局跟踪鼠标的运动之外，没有其他方法，因为setInterval不会为您创建带有鼠标数据的事件。

下面是别人的例子:https://stackoverflow.com/a/4704204/1381550

您可能想使用setInterval(yourFunction, delay)。
"yourFunction"很好……你的函数和'delay'是以毫秒为单位的间隔时间。

在你的例子中，它看起来像:

//alway's define stuff before you use it
function drawSomething(){ 
    //your code here
}
window.setInterval(drawSomething, 500); //this is your 0.5 sec stepped interval

参见(例如)MDN

祝你好运!

使用新的HTML5功能requestAnimationFrame与画布代替setInterval和setTimeout，以获得更好的性能。例如，requestAnimationFrame确保当用户切换到另一个选项卡时，动画暂停=节省CPU。要支持所有浏览器使用shim层，请参见示例:

//shim layer
window.requestAnimFrame =
window.requestAnimationFrame       ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame    ||
window.oRequestAnimationFrame      ||
window.msRequestAnimationFrame     ||
function(callback) {
    window.setTimeout(callback, 1000 / 60);
};
function animate() {   
       requestAnimFrame( animate );        
       draw();   
    }
function draw()    
    {        
      // handle time interval here
      // actual code here
    }

有关更多信息，请参阅(包括如何处理时间间隔的技巧):

  • 窗口。requestAnimationFrame mozzila
  • adobe cook books
    • HTML5岩石

您可以使用setInterval每0.5秒检查一次鼠标位置

setInterval(step, 500);
function step() {
  // do your stuff here
}

函数step将每0.5秒执行一次。

相关文章：