我正在创建一个移动webapp游戏,让用户可以在屏幕上滑动以清除它。 我正在尝试编写一个智能功能,可以检测几乎整个画布是否透明。
我有一个间隔调用每秒下面的函数来进行检查。 它的工作方式是我采用宽度为20px的画布扇区,并且与画布一样高。
此函数应该运行得非常流畅,但由于某种原因,getImageData函数返回许多像素。我的扇区总是20px宽,并且具有相同的高度,因此每次都应该返回相同数量的像素。当然,由于getImageData返回越来越多的数字,我的循环越来越慢。
有谁知道是什么原因造成的?我是否误解了getImageData函数的工作方式?
isCanvasTransparent: function (fromX, toX, currentIteration) {
if(currentIteration < this.clearedIterations) { // If a sector is already clear, we dont need to check it again
this.isCanvasTransparent(fromX + 20, toX + 20, currentIteration + 1);
return;
} else {
var data = this.context.getImageData(fromX, 0, toX, parseInt(this.canvas.style.width)).data;
var counter = 0;
var i = 0;
// For some reason, the length increases, but the diff between fromX and toX is always 20
console.log(data.length);
for(i=0;i<(data.length);i+=4) {
if(data[i+3]!==0){
counter++;
// I stop iterating, since there are too many non transparent pixels
if(counter > 10) {
break;
}
}
}
// I accept that 10 pixels in each sector is not transparent
if((counter < 10) && !this.alerted) {
this.clearedIterations++; // Here we increase clearedIterations, since this sector is clear
// There are no more iterations, so we are done
if(currentIteration === this.maxIterations) {
// this is the interval that calls isCanvasTransparent(0, 20, 0)
// in the first place. The interval is called each second. But as soon the whole view
// is transparent, we clear it, so that isCanvasTransparent is no longer called
clearInterval(this.checkCanvasTimeout);
this.alerted = true;
TouchHelpers.removeTouchEvents();
this.levelCompleted();
return;
} else {
// this sector is clear, but we need to check the next one, since we are not at the end
this.isCanvasTransparent(fromX + 20, toX + 20, currentIteration + 1);
}
}
}
},
答案 0 :(得分:2)
如果没有看到你如何设置fromX / toX,这是不确定的,但看起来你没有给getImageData提供正确的参数。
context.getImageData
包含以下参数:
[添加:根据其他信息]
如果你想要相同大小的像素数据块,你的第一个电话是
var data=getImageData(0,0, 20, canvas.height).data;
你的第二个电话会是:
// Note: the width arguement remains at 20, not increase to 40
var data=getImageData(20,0, 20, canvas.height).data;