HTML5动画，无中断捕捉鼠标移动？

我这里有个小问题，我想解决。当我开始使用HTML5和画布制作动画时，我希望有一个恒定的动画流，并且能够在不中断动画流的情况下捕捉鼠标移动。现在这似乎是个问题。我带来 这里是我测试代码中的一些代码

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);        
}

函数mainInit（）
{
canvas=document.getElementById（'canvas'）；
context=canvas.getContext（'2d'）；
巴拉里推球（新球（30,30,2,4,15，“#EEEEEE”）；
设置间隔（drawScene，20）；
} 
函数drawsecene（）
{ 
//主场景功能
clear（）；//清除画布
//绘制动画对象
对于（变量i=0；i

---

问题是，当我移动eventListner时，鼠标移动会覆盖绘制间隔，使绘制速度慢得多。我应该如何/在何处放置鼠标事件的代码，以便它不会中断此绘制间隔，但仍然根据间隔绘制鼠标事件？

乍一看，代码似乎会尝试每帧添加一个事件侦听器……而JS会转储重复的处理程序，这会降低代码的速度。现在还不清楚您是在尝试每隔一段时间捕捉鼠标移动，还是在不断捕捉鼠标移动，因为您的代码试图同时捕捉鼠标移动和鼠标移动。以下是两全其美的解决方案：

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

---

下面是一个不断捕获和显示鼠标位置的示例，您可能真的想要这样做。

乍一看，代码似乎会尝试在每一帧添加一个事件侦听器……虽然JS会转储重复的处理程序，但会减慢代码的速度。现在还不清楚您是在尝试每隔一段时间捕捉鼠标移动，还是在不断捕捉鼠标移动，因为您的代码试图同时捕捉鼠标移动和鼠标移动。以下是两全其美的解决方案：

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

---

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

将addEventLister设置在外部并保存数据并从循环中读取解决了问题。将addEventLister设置在外部并保存数据并从循环中读取解决了问题。