在循环中绘制画布

Question

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

问题： 只显示最后一个画布，剩下的部分留空。

下面的代码： http://pastie.org/private/bt4b4imwd6csrv32gay2yq - 渲染功能

而这里的模型： http://pastie.org/private/mvmlbrefzbcgltwyfyfw

我输出的图像的来源和实际画布的id在onload事件，我只得到了最后一个（最后一个画布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);