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

Question

我需要在一个包含多个图像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;
}

有任何想法吗？

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

}