javascript - Canvas 上的图像相互堆叠

Question

我正在使用 for 循环将多个图像放在 Canvas 上。 我的 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);

在定义图像对象的 onload 之后设置图像对象的 src 也是明智的做法，以避免缓存图像出现问题。