4

フォーラムでこれに関するいくつかの質問がありますが、私が必要としているものに対する適切な回答を得ることができませんでした.

私は Canvas と Javascript に取り組んでおり、ゲームが開いたらすぐにいくつかの画像をプリロードしたいと考えています。構築したいメソッドの例を作成しました（そして機能しませんでした）

キャンバス (この例では 1 つだけ) が宣言され、画像をロードしようとする「main.html」、すべての画像をプリロードする「ImagePreloader.js」、および「Variables.js」の 3 つのファイルがあります。私は自分の変数を持っています。

誰かがこの画像のプリロード方法で私を助けてくれますか、または実行可能な方法を提案してくれますか? これまで読んだチュートリアルでは理解できなかったonLoad（）関数を使用していないため、画像が読み込まれていないと思います（画像に適用する方法は知っていますが、画像の配列には適用しません）

main.html:

<!DOCTYPE HTML>
<html>
  <body>
    <canvas id="myCanvas" width="800" height="600"></canvas>

    <script type="text/javascript" src="Variables.js"></script>
    <script type="text/javascript" src="ImagePreloader.js"></script>
    <script>
    // Basic canvas info
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // Draw one of the images. Somehow it doesn't work :(
    context.drawImage(imageArray[3], x, y, width, height);
    </script>
  </body>
</html>

ImagePreloader.js

// This should preload the images in imageArray[i] with 0 <= i <= 5 ... right?
function preloader() 
 {
     for(var i=0; i<5; i++) 
     {
          imageArray[i].src=images[i];
     }
 }

変数.js

// array of sources of my images
images = new Array();
images[0]="img1.jpg"
images[1]="img2.jpg"
images[2]="img3.jpg"
images[3]="img4.jpg"
images[4]="img5.jpg"

// Stuff to draw the image
var x = 50;
var y = 50;
var width = 256;
var height = 256;

// Is this actually an array of images?
imageArray = new Image();

前もって感謝します！

4

3 に答える 3

2

使用する前に、これらの 5 つのイメージがロードされていることを確認する必要があります (ダウンロードされたからといって、常にロードされて使用できる状態になっているとは限りません。オンロードのみが、イメージが使用できる状態であることを保証します)。

したがって、画像のオンロードを追加し、オンロード関数から数えて、5 つが読み込まれた後に描画をトリガーします。

function prefetchImages(sources){
        var images = [];
        var loadedImages = 0;
        var numImages = sources.length;
        for (var i=0; i < numImages; i++) {
            images[i] = new Image();
            images[i].onload = function(){
                if (++loadedImages >= numImages) {
                    //ready draw with my images now
                    drawThePainting();
                }
            };
            images[i].src = sources[i]; //bind onload before setting src bug in some chrome versions
        }
    };

prefetchImages(["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]);

function drawThePainting(){
        // Basic canvas info
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // Draw one of the images. Somehow it doesn't work :(
    context.drawImage(imageArray[3], x, y, width, height);
}
于 2013-07-03T05:25:28.923 に答える