Javascript HTML5:getImageData与onmousemove在Firefox中减慢我的应用程序

我用画布创建了一个html5小游戏

在画布中，有许多显示的精灵，其中一个精灵会自动从左向右移动。其他的是静力学

当我将鼠标移动到画布上时，我在临时画布中绘制所有精灵，并使用getImageData查找鼠标所在的精灵

但是getImageData使Firefox中的移动精灵变得异常缓慢

---

那么，如何避免这种减速呢

这是我的代码：

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

}

---

不确定这样做会带来多大的性能提升-无需清除精灵之间的临时画布。。。。像素是清晰的，直到它被画上精灵

我引用了一个名为

checkBoundingBoxisOver

的函数-不确定您是否可以编写此函数，但我现在不能-此外，我甚至不知道您的

数组对象是什么

我认为这很简单，只需要一个精灵的x，y，宽度，高度来做一个初步的检查，在做昂贵的绘图之前，精灵是否可能在鼠标下

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

不确定这样做会带来多大的性能提升-无需清除精灵之间的临时画布。。。。像素是清晰的，直到它被画上精灵

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

我认为这很简单，只需要一个精灵的x，y，宽度，高度来做一个初步的检查，在做昂贵的绘图之前，精灵是否可能在鼠标下

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

我遇到了一个类似的问题：在动画的每一帧中从一个大位图读取像素。在我的例子中，它是一个黑白图像，显示世界是水还是陆地

即使只读取一个像素，Firefox上的getImageData速度也非常慢

我的解决方案是只调用一次getImageData并将结果存储在imageData变量中

    var imageData = self.context.getImageData(0,0,image.width, image.height);

然后，您可以重复调用图像数据并提取所需的图像部分。在我的情况下，我只需要一个单一的像素或单一的颜色，看起来像这样

    var pixelRed = this.imageData.data[(y* imageWidth * 4) + (x * 4)] == 0;

x和y是不言自明的，因为像素是4字节值（红色、绿色、蓝色、Alpha），所以我需要将数组索引乘以4。这对我来说是非常快的

只要数组不太大，使用此代码直接从数组中获取任何部分都是非常容易的。
我遇到了一个类似的问题，即在动画的每一帧从大位图读取像素。在我的例子中，它是一个黑白图像，显示世界是水还是陆地

即使只读取一个像素，Firefox上的getImageData速度也非常慢

我的解决方案是只调用一次getImageData并将结果存储在imageData变量中

    var imageData = self.context.getImageData(0,0,image.width, image.height);

然后，您可以重复调用图像数据并提取所需的图像部分。在我的情况下，我只需要一个单一的像素或单一的颜色，看起来像这样

    var pixelRed = this.imageData.data[(y* imageWidth * 4) + (x * 4)] == 0;

x和y是不言自明的，因为像素是4字节值（红色、绿色、蓝色、Alpha），所以我需要将数组索引乘以4。这对我来说是非常快的

只要数组不太大，使用此代码直接从数组中提取任何部分都是非常容易的。
那么，避免这种减速的解决方案是什么呢？不清楚您在这里想要实现什么。要在画布上移动跟踪鼠标位置的精灵吗？移动精灵只是为了检查应用程序的性能：如果移动精灵减速，则表示应用程序的性能不佳。通常情况下，移动的精灵不能减速。在临时画布上不断地画画和擦除看起来不必要的昂贵。对此，我有两个建议：1。在游戏中使用两个画布，一个用于渲染背景和任何装饰性的内容，另一个用于要跟踪的交互元素。2.存储每个精灵边界框的坐标。这样，您可以先检查鼠标是否在交互对象上，然后使用坐标来确定它在哪个元素中。我不明白的是，为什么要在精灵中循环并绘制/读取画布数据。这是一个非常昂贵的“性能测试”。那么，避免这种减速的解决方案是什么呢？目前还不清楚您试图在这里实现什么。要在画布上移动跟踪鼠标位置的精灵吗？移动精灵只是为了检查应用程序的性能：如果移动精灵减速，则表示应用程序的性能不佳。通常情况下，移动的精灵不能减速。在临时画布上不断地画画和擦除看起来不必要的昂贵。对此，我有两个建议：1。在游戏中使用两个画布，一个用于渲染背景和任何装饰性的内容，另一个用于要跟踪的交互元素。2.存储每个精灵边界框的坐标。这样，您可以先检查鼠标是否在交互对象上，然后使用坐标来确定它在哪个元素中。我不明白的是，为什么要在精灵中循环并绘制/读取画布数据。这是一个超级昂贵的“性能测试”。非常感谢，我会试试的！在检查像素alpha之前，首先检查边界框是否结束是一个好主意！非常感谢，我来试试！在检查像素alpha之前，首先检查边界框是否结束是一个好主意！