var canvas = null;
var context = null;
var img = null;
var frames = [];
var assets = [];
var imgLoadCount = 0;
setup = function (fileArray) {
assets = fileArray;
//Loading an image
for(var i = 0; i < assets.length; i++) {
console.log(i);
frames.push(new Image()); // declare image object
frames[i].onload = onImageLoad(assets.length); //declare onload method
frames[i].src = URL.createObjectURL(assets[i]); //set url
}
};
onImageLoad = function (len) {
console.log("IMAGE!!!");
canvas = document.getElementById("my_canvas"); //creates a canvas element
context = canvas.getContext('2d');
canvas.width = window.innerWidth; //for full screen
canvas.height = window.innerHeight;
var x, y, numTilesRow;
numTilesRow = 10;
imgLoadCount++;
console.log("imgLoadCount = " + frames.length + ", length = " + len);
if(imgLoadCount != len) {
return;
}
for(var index = 0; index < len; index++) {
x = Math.floor((index % numTilesRow));
y = Math.floor(index / numTilesRow);
worldX = x * numTilesRow;
worldY = y * numTilesRow;
context.drawImage(frames[index], worldX, worldY);
}
};
我无法说明插入代码后为什么drawImage突然停止工作 if(imgLoadCount!= len){return;}确保所有图像都正确加载。有人请帮我找到解决这个问题的方法。
答案 0 :(得分:1)
您必须了解函数引用和函数调用之间的区别。期望为.onload
属性分配一个函数引用,但是为它赋予函数.onImageLoad
的立即(!)调用的返回值。区别在于括号()
。
如果要调用带参数的函数作为.onload
的回调,那么你必须将它包含在一个匿名函数中(它本身就是一个函数引用)
frames[i].onload = function() {onImageLoad(assets.length);};
当然,有了这个,你就创建了一个闭包。这意味着在执行时,onImageLoad()
方法将可以访问当前值assets.length
(而不是分配点的值!)。但在你的情况下,这没有任何区别,因为assets.length
永远不会改变。