HTML5动画，不间断地捕捉鼠标移动？
我这里有一个小问题，我试图解决。当我开始使用 HTML5 和 Canvas 制作动画时，我希望拥有恒定的动画流，并且能够在不中断动画流的情况下捕获鼠标移动。现在这似乎是一个问题。我会带来 我的测试代码中的一些代码在这里。
function mainInit()
{
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
ballArray.push(new Ball(30,30,2,4,15,"#EEEEEE"));
setInterval(drawScene,20);
}
function drawScene()
{
// main drawScene function
clear(); // clear canvas
// draw animated objects
for(var i = 0; i < ballArray.length; i++)
{
ballArray[i].draw();
}
Event_MouseMove();
}
var messageMousePos = '';
function Event_MouseMove()
{
canvas.addEventListener('mousemove', function(evt)
{
var mousePos = getMousePos(canvas, evt);
messageMousePos = "Mouse position: " + mousePos.x + "," + mousePos.y;
context.font = '10pt Calibri';
context.fillStyle = 'black';
context.fillText(messageMousePos , 5, 15);
}, false);
}
问题是，当我移动事件监听器以进行鼠标移动时，会覆盖绘制间隔并使其速度变慢。我应该如何/在哪里放置鼠标事件的代码，以便它不会中断此绘制间隔，但仍根据间隔绘制鼠标事件？
I have a slight problem here I try to solve. As I start to do animation with HTML5 and Canvas I want to have a constant animation flow and also be able to capture mouse movement without interrupting the animation flow. This right now seems like a problem. Ill bring
some code from my test code here.
function mainInit()
{
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
ballArray.push(new Ball(30,30,2,4,15,"#EEEEEE"));
setInterval(drawScene,20);
}
function drawScene()
{
// main drawScene function
clear(); // clear canvas
// draw animated objects
for(var i = 0; i < ballArray.length; i++)
{
ballArray[i].draw();
}
Event_MouseMove();
}
var messageMousePos = '';
function Event_MouseMove()
{
canvas.addEventListener('mousemove', function(evt)
{
var mousePos = getMousePos(canvas, evt);
messageMousePos = "Mouse position: " + mousePos.x + "," + mousePos.y;
context.font = '10pt Calibri';
context.fillStyle = 'black';
context.fillText(messageMousePos , 5, 15);
}, false);
}
The problem is that when I move the eventListner for mouse movement overrides the draw interval and makes it go much slower. How/where should I put the code for the mouse event so it do not interrupt this draw interval, but still draw the mouse events according to the interval?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
乍一看，代码似乎会尝试在每一帧添加一个事件侦听器...虽然 JS 会转储重复的处理程序，但它会减慢您的代码速度。目前尚不清楚您是尝试仅在每个时间间隔捕获鼠标移动，还是不断捕获鼠标移动，因为您的代码有点尝试同时执行这两种操作。这是两全其美的解决方案：
在循环外调用 addEventListener 一次，并让它调用的函数将鼠标位置保存在 messageMousePos 中。然后，如果您确实只想每 20 毫秒输出一次文本，请在 drawScene 函数中放置您的 font/fillstyle/filltext 代码。与不断渲染鼠标位置文本时文本变化的平滑程度相比，这可能看起来不稳定。
这是一个不断捕获和显示鼠标位置的示例，如下你可能真的想做。
At a glance, it looks like the code will try to add an event listener every frame...While JS will dump duplicate handlers, it will slow your code down. It's unclear whether you are trying to only capture mouse movement every interval, or constantly, because your code is kinda trying to do both. Here's the best of both worlds solution:
Call addEventListener once outside the loop, and have the function it calls save the mouse position in messageMousePos. Then, within the drawScene function, put your font/fillstyle/filltext code if you really do only want the text outputting every 20ms. This might look choppy compared to how smoothly the text would change if you were constantly rendering the mouse position text.
Here is an example of constantly capturing and displaying the mouse position, as you might actually want to do.