Javascript 循环绘制画布

我通过附加到元素x画布来渲染主干模型。然后在一个循环中，我在每个循环上画一个图像

问题： 只有最后一块画布看起来是画出来的，其余的都是空白的

代码如下： -渲染功能

这是模型：

我已经在onload事件中输出了图像的源和实际画布的id，并且我只得到了最后一个（最后一个画布id，最后一个图像源）x次（x=parts变量的长度）

谢谢。

这是一个“循环中的结束”问题。使用.onload创建一个闭包。此闭包可以访问其周围的范围，但不是在创建时，而是在执行时。此时循环已到达最后一个元素，因此

faceImg

和

ctxFace

将只引用最后一个图像

解决方案：使用立即执行的匿名函数创建一个内部闭包，在每个循环中移交当前的

faceImg

和

ctxFace

，并返回一个将在加载时执行的匿名函数

var faceImg = new Image();
faceImg.src = cardsPath + this.model.get('name') + '/faces/'+key+'/'+parts[key];            
faceImg.onload = (function (localCtx, localFaceImg) {
   return function() {localCtx.drawImage(localFaceImg, 0, 0);}
})(ctxFace, faceImg);