画布上的图像彼此堆叠

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。