Javascript使用JCanvaScript在画布中加载图像

Question

我正在使用JcanvaScript库来处理Html5画布，现在我想在我的Canvas中加载一些图像，但只有最后一次图像加载成功，我看不到任何其他图像，但最后一个，我不知道是什么我的代码错了。

这是代码

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      canvas {
           border: 1px solid #9C9898;
       }
    </style>
      <script src="jcanvas/jCanvaScript.1.5.15.js"></script>
      <script>
          var imagesUrl = [];
          var imagesObj = [];
          var canvasWidth = 800;
          var canvasHeight = 600;
          var imagesIdPrefix = 'images_';
          var canvas = "canvas";
          var fps = 60;

          imagesUrl.push('images/image1.jpg');
          imagesUrl.push('images/image2.jpg');
          imagesUrl.push('images/image3.jpg');
          imagesUrl.push('images/image4.jpg');

          function init(){
              for (i = 0; i < imagesUrl.length; i++){
                  var xImage = new Image();
                  xImage.src = imagesUrl[i];
                  xImage.onload = function(){
                      jc.start(canvas, fps);
                      jc.image(xImage, i*10, 0, 200, 200)
                              .id(imagesIdPrefix.toString() + i.toString());
                      jc.start(canvas, fps);
                  }
                  imagesObj.push(xImage);
              }
          }

      </script>
  </head>
  <body onload="init()">
    <canvas id="canvas" width="800px" height="600px"></canvas>
  </body>
</html>

Answer 1

MrOBrian在评论中发现了这个错误：当调用onload回调时，我得到它在循环结束时的值。 这就是为什么你认为只有最后一次图像加载成功的原因。

一个标准的解决方案是在闭包中嵌入循环的内容，保持i的值：

for (i = 0; i < imagesUrl.length; i++){
     (function(i){
              var xImage = new Image();
              xImage.src = imagesUrl[i];
              xImage.onload = function(){
                  jc.start(canvas, fps);
                  jc.image(xImage, i*10, 0, 200, 200)
                          .id(imagesIdPrefix.toString() + i.toString());
                  jc.start(canvas, fps);
              }
              imagesObj.push(xImage);
       })(i);
   }

编辑：

如果要在运行某些代码之前确保加载所有需要的图像，可以使用此功能：

function onLoadAll(images, callback) {
    var n=0;
    for (var i=images.length; i-->0;) {
        if (images[i].width==0) {
            n++;
            images[i].onload=function(){
                if (--n==0) callback();
            };
        }
    }
    if (n==0) callback();
}

图像必须首先提供给他们的src。 你可以这样调用这个函数：

onLoadAll(imagesObj, function(){
     // do something with imagesObj
});

Answer 2

您需要确保在开始循环之前加载图像。

通过在for循环内部定义onload函数，图像可能没有被该点加载，因此脚本将跳过它。 当它完成循环时，最后一个图像可能是唯一一个及时加载的图像。

我建议为for循环外的每个图像添加一个加载器，当加载所有图像时，继续循环遍历数组。

加载器和检查器看起来像这样：

var loadedImages = [];
var loadedNumber = 3 //the number of images you need loaded    
var imageToBeLoaded = new Image();
imageToBeLoaded.onload = function() {
    loadedImages.push(true);
    checkImages();
}
function checkImages() {
    if (loadedImages.length != loadedNumber) {
        setTimeout(checkImages(),1000);
    } else {
        init(); //your draw function
    }
}