的drawImage不工作

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为什么突然停止插入代码后工作，如果（imgLoadCount = LEN！）{回报;}这将确保所有图像加载正确。请有人帮我找到解决这个问题的方法。的drawImage不工作

来源

2013-04-29 user1523292

愚蠢的问题，但你检查看到'imgLoadCount == len'？ – 2013-04-29 06:54:32

是的，下面的for循环只在imgLoad === len时才运行，这是所有图像加载时的情况，因此drawImage需要在循环的每次运行中绘制图像，但不会。这就是我需要帮助的地方。 – user1523292 2013-04-29 07:24:18

您必须了解函数引用和函数调用之间的区别。 .onload属性预计会分配一个函数引用，但您可以使用函数.onImageLoad的立即（！）调用的返回值分配它。区别在于括号()。

如果要调用一个函数参数，回调.onload，那么你就必须把它列入到一个匿名函数（这本身就是一个函数引用）

frames[i].onload = function() {onImageLoad(assets.length);};

有了这个，的当然，你创建一个闭包。这意味着在执行时onImageLoad()方法将有权访问assets.length的当前值（而不是在赋值点处的值）。但在你的情况下，这并没有什么区别，因为assets.length从不改变。

来源

2013-04-29 07:17:53 devnull69

非常感谢！代码现在正在工作 – user1523292 2013-04-29 07:47:21

的drawImage不工作

回答

相关问题