在循环中绘制画布

Question

我通过追加元素x画布来渲染我的Backbone模型。然后在一个循环中，我在每个人上画一个图像。

问题： 似乎只绘制了最后一个画布，其余画布留空。

这是代码： http://pastie.org/private/bt4b4imwd6csrv32gay2yq - 渲染功能

这是模型： http://pastie.org/private/mvmlbrefzbcgltwyfyfw

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

感谢。

Answer 1

这是一个“循环闭合”问题。使用.onload，您将创建一个闭包。此闭包可以访问其周围的范围，但在创建时不是，而是在执行时。在那个时间点，循环已到达最后一个元素，因此faceImg和ctxFace只会引用最后一个图像。

解决方案：使用立即执行的匿名函数创建内部闭包，在每个循环中移交当前faceImg和ctxFace并返回将在onload上执行的匿名函数

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);