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函数中，如果你真的只想要每20ms输出一次文本，请输入你的font / fillstyle / filltext代码。如果您不断渲染鼠标位置文本，与文本变化的平滑程度相比，这可能看起来不稳定。

这是一个example，可以持续捕捉并显示鼠标位置，就像你真正想要的那样。

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

1 个答案: