繪製多個HTML畫布只繪製最後一個？

Question

在我正在編寫的應用程序中，有一個頁面從我的數據庫加載多個base64編碼的圖像，並將它們放入JavaScript數組中。這是通過EJS模板在服務器上發生的，所以當用戶收到HTML頁面時，會出現base64編碼的圖像（我檢查了這一點）。

下一步是在客戶端使用JavaScript循環顯示畫布，然後在每個畫布上填充相應的圖像數據。但是，我收到了一些奇怪的行爲。每次只填充最後一個畫布。

for (var i = 1; i < 13; i++) { 
    var ctx = document.getElementById('canvas-' + i).getContext('2d'), 
     image = new Image(); 

    image.onload = function() { 
     ctx.drawImage(image, 0, 0); 
    } 
    image.src = images[(i - 1)]; 
} 

images數組定義在該代碼的正上方（在同一範圍內）。如果我像這樣執行代碼，只會填充最後一個畫布（id爲'canvas-12'）。如果我將for循環結束條件降低到例如i < 11，則只填充id爲'canvas-10'的畫布。

有什麼我失蹤了嗎？

Answer 1

看起來像封閉問題;每次循環時，都會更改onload函數中包含的對象ctx。你需要確保你沒有使用閉包在循環中更新對象：

for (var i = 1; i < 13; i++) { 
    var ctx = document.getElementById('canvas-' + i).getContext('2d'), 
     image = new Image(); 
    (function(ctx, image) { 
     image.onload = function() { 
      ctx.drawImage(image, 0, 0); 
     } 
     image.src = images[(i - 1)]; 
    })(ctx, image); 
} 

注意：我沒有測試過這個。