绘制图像不工作答案

【问题标题】：drawImage is not working绘制图像不工作
【发布时间】：2013-04-29 15:41:23
【问题描述】：

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;} 确保所有图像都正确加载。请有人帮我找到解决这个问题的方法。

【问题讨论】：

愚蠢的问题，但你检查过imgLoadCount == len吗？
是的，下面的 for 循环仅在 imgLoad === len 时运行，即所有图像都已加载，因此 drawImage 应在每次循环运行时绘制图像，但事实并非如此。这就是我需要帮助的地方。

标签： javascript html canvas drawimage

【解决方案1】：

您必须了解函数引用和函数调用之间的区别。 .onload 属性应该被分配一个函数引用，但是您将它分配给函数.onImageLoad 的立即（！）调用的返回值。区别在于括号()。

如果你想调用一个带有参数的函数作为对.onload的回调，那么你必须将它包含到一个匿名函数中（它本身就是一个函数引用）

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

当然，有了这个，你就创建了一个闭包。这意味着在执行点onImageLoad() 方法将可以访问assets.length 的当前值（而不是分配点的值！）。但在你的情况下，这没有任何区别，因为assets.length 永远不会改变。

【讨论】：