我用 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);
}
最佳答案
不确定这样做会带来多少性能提升 - 无需清除 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;
}
关于javascript - HTML5 : getImageData with onmousemove make slow my application in Firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35556696/