Javascript drawImage不工作 var canvas=null； var-context=null； var-img=null； var框架=[]； var资产=[]； var imgLoadCount=0； 设置=函数（fileArray）{ 资产=文件数组； //加载图像 对于（var i=0；i

我不知道为什么drawImage在插入代码后突然停止工作

---

如果（imgLoadCount！=len）{return；}，则确保正确加载所有图像。有人能帮我找到这个问题的解决方案吗。

你必须理解函数引用和函数调用之间的区别。

.onload

属性需要分配一个函数引用，但您可以使用对函数

.onImageLoad

的立即（！）调用的返回值来分配它。区别在于括号

（）

如果要调用带有参数的函数作为对

.onload

的回调，则必须将其包含在匿名函数中（该函数本身是函数引用）

---

当然，有了这个，您就创建了一个闭包。这意味着在执行点，

onImageLoad（）

方法将访问

assets.length的当前值（而不是分配点的值！）。但在您的情况下，这没有任何区别，因为
assets.length
从不更改。
愚蠢的问题，但您是否检查了
imgLoadCount==len
？是的，下面的for循环仅在imgLoad==len时运行，也就是在加载所有图像时，因此，期望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);
  }
};

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