1

に複数の画像を含める必要がありますcanvas。を介して動的にロードしたいfor-loop。

何度も試しましたが、最良の場合は最後の画像のみが表示されます。このトレッドをチェックしましたが、それでも最後の画像しか取得できません。

説明のために、これが私の最新のコードです（基本的に他の投稿からのもの）：

 for (var i = 0; i <= max; i++)
{
    thisWidth = 250;
    thisHeight = 0;
    imgSrc = "photo_"+i+".jpg";
    letterImg = new Image();
    letterImg.onload = function() {
        context.drawImage(letterImg,thisWidth*i,thisHeight);
    }
    letterImg.src = imgSrc;
}

何か案は？

4

2 に答える 2

5

問題は、onloadイベントが非同期で発生し、それまでにループ変数がすでに最後の値になっていることです。クロージャを使用して修正できます。

for (var i = 0; i <= max; i++)
{
   thisWidth = 250;
   thisHeight = 0;


   (function(j){
      var imgSrc = "photo_"+j+".jpg";
      var letterImg = new Image();
      letterImg.onload = function() {
        context.drawImage(letterImg,thisWidth*j,thisHeight);
      }
      letterImg.src = imgSrc;
   })(i);

}
于 2012-09-26T15:27:21.480 に答える
1

これがあなたの問題を解決する別の方法です...

letterImg画像への単なる参照です。したがって、forループはn回実行され、そのたびにletterImg新しいイメージに変更されます。そのため、最新の画像しか描画されません。

コードは次のとおりです（もちろん、maxImg数値を正しい値に変更してください）。

images = []; //An array where images are stored.
thisWidth = 250; //This doesn't need to be inside the for-loop.
thisHeight = 0;
maxImg = 342;

//Attach an onload event to an image, that will draw it at (x, y) coordinates.
attach = function(img, x, y)
{
    img.onload = function()
    {
        context.drawImage(img, x, y);
    }
}

for (var i = 0; i <= maxImg; i++)
{
    imgSrc = "photo_" + i + ".jpg";

    images[i] = new Image();
    images[i].src = imgSrc;

    attach(images[i], thisWidth*i, thisHeight);
}
于 2012-09-26T15:36:12.533 に答える