1

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を印刷しました、そしてそれらは各反復で異なります。何か案は？

ありがとう

4

1 に答える 1

2

そのスコープの問題

すべての呼び出しが同じ（最後の）値を使用しないようにするには、クロージャーを作成する必要がposxありposyます。

何かのようなもの

img.onload = (function(x,y) { return function() {
        var canvas = document.getElementById("canvas").getContext('2d');
        canvas.drawImage(this, x, y);
    };
  })(posx, posy);

また、キャッシュされた画像の問題を回避するためにsrc、定義後に画像オブジェクトのsetを使用することも賢明です。onload

于 2013-03-12T00:41:51.343 に答える