Question

我用画布创建了一个小小的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);

}

Answer 1

不确定你获得了多少性能提升 - 无需清除sprite之间的临时画布......像素是清晰的，直到画上精灵！

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

我认为它很简单，只需要一个精灵的x，y，宽度，高度来做一个初步检查，如果精灵甚至可能在鼠标之下进行昂贵的绘制之前

array_objects

Answer 2

我遇到了类似的问题，从动画的每一帧读取大位图的像素。就我而言，它是一张黑白图像，显示世界在哪里是水或土地。

即使只读取一个像素，

getImageData在Firefox上也非常慢。

我的解决方案是只调用一次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.事实证明对我来说非常快。

使用此代码可以很容易地直接从数组中获取任何部分，只要它不是太大。

HTML5：带onmousemove的getImageData使我的应用程序在Firefox中变慢

2 个答案: