1

Html5キャンバスで作業するためにJcanvaScriptライブラリを使用していますが、キャンバスにいくつかの画像をロードしたいのですが、最後の画像のロードのみが成功し、最後の画像以外は表示されず、何が何であるかわかりません私のコードが間違っています。

ここにコードがあります

<!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>
4

2 に答える 2

1

画像をループする前に、画像が読み込まれていることを確認する必要があります。

ループonload内で関数を定義すると、その時点までに画像が読み込まれていない可能性があるため、スクリプトはそれをスキップします。forループが完了すると、最後の画像だけが時間内に読み込まれる場合があります。

ループの外側に画像ごとにローダーを追加することをお勧めし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
    }
}
于 2012-08-21T14:39:40.233 に答える