javascript - HTML5 : getImageData with onmousemove make slow my application in Firefox

Question

我用 Canvas 创建了一个 html5 小游戏。

在 Canvas 中，有许多显示的 Sprite ，其中一个会自动从左向右移动。其他都是静态的。

当我将鼠标移到 Canvas 上时，我会在临时 Canvas 中绘制所有 Sprite ，然后使用 getImageData 找到鼠标悬停在其上的 Sprite 。

但是 getImageData 通常会使 Firefox 中移动的 Sprite 变慢。

那么避免这种减速的解决方案是什么？

这里是我的代码:

function getSelectedObject(array_objects)
{
    //Clear the temporary canvas :
    tmpcx.clearRect(0, 0, tmpc.width, tmpc.height);

    /*Search the right sprite object :*/
    for(var i = array_objects.length-1; i >= 0; i--)
    {
        array_objects[i].draw(tmpcx);

        imageData = tmpcx.getImageData(mouse_x, mouse_y, 1, 1);

        component = imageData.data;

        if(component[3] > 0)
        {   
            //Return the sprite object found : 
            return array_objects[i];
        }

        else
        {
            tmpcx.clearRect(0, 0, tmpc.width, tmpc.height);
        }
    }

    return false;
}


canvas.onmousemove = function(event)
{

selectedObject = getSelectedObject(array_objects);

}

Answer 1

不确定这样做会带来多少性能提升 - 无需清除 sprite 之间的临时 Canvas ....在绘制 sprite 之前，像素是清晰的!

我引用了一个名为 checkBoundingBoxisOver 的函数 - 不确定您是否可以编写此函数，但我现在不能 - 此外，我什至不知道您的 array_objects 是!!!

我认为这很简单，只需要一个 Sprite 的 x、y、宽度、高度来初步检查 Sprite 是否可能在鼠标下方，然后再进行昂贵的绘制

function getSelectedObject(array_objects) {
    //Clear the temporary canvas :
    tmpcx.clearRect(0, 0, tmpc.width, tmpc.height);
    var sprite;
    /*Search the right sprite object :*/
    for (var i = array_objects.length - 1; i >= 0; i--) {

        sprite = array_objects[i];

        if (checkBoundingBoxisOver(sprite, mouse_x, mouse_y)) {

            sprite.draw(tmpcx);
            imageData = tmpcx.getImageData(mouse_x, mouse_y, 1, 1);
            component = imageData.data;
            if (component[3] > 0) {
                return sprite;
            }
        }
    }
    return false;
}