Javascript 画布上的图像彼此堆叠

我使用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和posy，所有的图像都在同一位置绘制。 我将它们的posx、posy打印到控制台，并且它们在每次迭代中都是不同的。 有什么想法吗

谢谢

这是一个范围问题

您需要创建一个闭包，以防止所有调用使用相同的（最后一个）

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

也是明智的做法，以避免缓存图像出现问题。

您可以解释作用域问题的性质，或者建议一个链接，我可以从中了解它吗？。我问这个问题也是因为当drawImage工作时，我设置了如下属性：style.height=“50px”；不起作用，我假设这也是一个范围问题，请阅读