2

我是画布的新手，我想知道如何在能够引用鼠标位置的同时获得“步进”事件（例如每半秒执行一次），例如，如果我想每 0.5 次在鼠标位置绘制一些东西第二个独立于鼠标移动。

4

4 回答 4

1

将新的 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
    }

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

于 2013-04-15T16:18:16.710 回答
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

祝你好运！

于 2013-04-15T16:03:36.190 回答
1

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

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

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

于 2013-04-15T16:15:44.887 回答
0

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

setInterval(step, 500);

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

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

于 2013-04-15T16:04:03.207 回答