带鼠标的Javascript步骤事件

我是canvas的新手，我想知道如何在能够参考鼠标位置的同时获得“step”事件（例如，每半秒执行一次），例如，如果我想每0.5秒在鼠标位置绘制一个与鼠标移动无关的东西。

您可能想使用

设置间隔（您的函数，延迟）

“你的功能”很好。。。您的函数和“延迟”是以毫秒为单位的间隔时间

在您的情况下，这看起来像：

//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

参见（例如）

---

祝你好运

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

---

函数

步骤

将每0.5秒执行一次。

您必须将

mousemove

事件全局绑定到文档正文，并将鼠标位置保存到可公开访问的变量中（如

window.mouseX

和

window.mouseY

）。 然后在

setInterval（函数（）{
...
}, 500);

，您可以检索

window.mouseX

和

window.mouseY

的值

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

以下是其他人的例子：

---

使用新的HTML5功能

requestAnimationFrame

和画布，而不是

setInterval

和

setTimeout

，以获得更好的性能<例如，code>requestAnimationFrame确保当用户切换到另一个选项卡时，动画暂停=节省CPU。 要支持所有浏览器，请使用垫片层，请参见示例：

//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
    } 

有关更多信息，请参见（包括如何处理时间间隔的提示）：

---

如何才能在步骤（）中获得鼠标位置？我知道为了清楚起见，在这种特殊情况下，

setInterval（）

可能就足够了，但我会提到

requestAnimationFrame

作为一个更好的选择。我会选择

requestAnimationFrame

，请看我的答案。@Fallup:你是对的，我将画布标签添加到问题并向上投票！

//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
    }