在循環中繪製畫布

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