javascript - 画布上的图像相互堆叠

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 和 posy ，所有图像都被绘制在同一个位置。我将它们的 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);

src并且在定义图像对象后使用设置图像对象onload以避免缓存图像问题也是明智的。