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以避免缓存图像出现问题也是明智的。

画布上的图像正在堆叠在一起

1 个答案: