畫布上的圖像彼此堆疊

Question

我正在使用for循環將多個圖像放在畫布上。 我的for循環生成與

  var posx= i*(50); 
     var posy = i*(50); 

     img.src = "./path/img.png"; 
     img.onload = function() { 
     var canvas = document.getElementById("canvas").getContext('2d'); 

      canvas.drawImage(this, posx, posy); 
} 

即使我改變我POSX和銘文的位置，所有的圖像都被在同一位置繪製。 我在控制檯上打印了他們的posx，posy，並且在每次迭代中它們都不相同。 有什麼想法？

感謝

Answer 1

它是一個範圍問題

你需要創建一個封閉，以保持所有的呼叫使用相同的（最後）posx和posy值。

喜歡的東西

img.onload = (function(x,y) { return function() { 
     var canvas = document.getElementById("canvas").getContext('2d'); 
     canvas.drawImage(this, x, y); 
    }; 
    })(posx, posy); 

，它也是明智的使用設置後，你定義它onload以避免緩存圖像問題圖像對象的src。