Question

我是画布的新手，我想知道如何在能够引用鼠标位置的同时获得“步骤”事件（例如每半秒执行一次），例如，如果我想在鼠标上画一些东西每0.5秒定位一次，与鼠标移动无关。

Answer 1

您可能想要使用setInterval(yourFunction, delay) 'yourFunction'很好......你的功能和'延迟'是以毫秒为单位的间隔时间。

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

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

祝你好运！

Answer 2

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

据我所知，除了不断地全局跟踪鼠标移动之外别无他法，因为setInterval不会为您创建包含鼠标数据的事件。

这是其他人的例子： https://stackoverflow.com/a/4704204/1381550

Answer 3

使用新的HTML5功能requestAnimationFrame与画布而不是setInterval和setTimeout以获得更好的效果。例如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
    }

有关详情，请参阅（包括如何处理时间间隔的提示）：

Answer 4

您可以使用setInterval

每0.5秒检查一次鼠标位置

setInterval(step, 500);

function step() {
  // do your stuff here
}

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

用鼠标的Javascript步骤事件

4 个答案: