0

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

问题：似乎只画了最后一个画布，其余的都是空白的。

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

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

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

谢谢。

4

1 回答 1

1

这是一个“循环中的闭包”问题。使用您的 .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);
于 2012-12-06T14:43:47.903 回答