HTML5 动画，不间断地捕捉鼠标移动？

Question

我在这里有一个小问题我试图解决。当我开始使用 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);        
}

问题在于，当我移动 eventListner 以进行鼠标移动时，会覆盖绘制间隔并使其变得更慢。我应该如何/在哪里放置鼠标事件的代码，这样它就不会中断这个绘制间隔，但仍然根据间隔绘制鼠标事件？

Answer 1

乍一看，代码似乎会尝试在每一帧添加一个事件侦听器...虽然 JS 会转储重复的处理程序，但它会减慢您的代码速度。目前尚不清楚您是尝试仅在每个间隔捕获鼠标移动，还是不断地捕获鼠标移动，因为您的代码有点试图两者兼而有之。这是两全其美的解决方案：

在循环外调用 addEventListener 一次，并让它调用的函数将鼠标位置保存在 messageMousePos 中。然后，在 drawScene 函数中，如果您确实只希望每 20 毫秒输出一次文本，请输入您的字体/填充样式/填充文本代码。与您不断渲染鼠标位置文本时文本变化的平滑程度相比，这可能看起来很不稳定。

这是一个example 不断捕获和显示鼠标位置，您可能确实想要这样做。