javascript - HTML 5 Canvas - 在 Canvas 中动态包含多个图像

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

}