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

时间:2016-02-22 14:53:21

标签: javascript html5 getimagedata

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

}

2 个答案:

答案 0 :(得分:2)

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

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

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

array_objects

答案 1 :(得分: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.事实证明对我来说非常快。

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

寻找你感兴趣的贴纸↓↓↓
豫ICP备18024241号-1