HTML 5画布 - 动态地在画布中包含多个图像

Question

我需要在canvas中包含多个图像。我想通过for-loop动态加载它们。

我尝试了很多，但在最好的情况下只显示最后一张图片。我检查这tread，但我仍然只得到最后的形象。

对于解释，这里是我的最新代码（基本上是一个从其他职位）：

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; 
} 

任何想法？

Answer 1

问题是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); 

} 

Answer 2

这里是您解决问题的另一种方式......

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); 
}