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 回答