2

Javascript を使用して 2 つの画像を読み込み、キャンバスに描画しています。画像の onload イベントを使用して、両方の画像が読み込まれた後に画像を描画します。

var loadedImagesCount = 0;
var NUM_OF_TILES=2;

window.onload=function(){
    background.onload = imageOnLoad();
    background.src ="background.png";                   
    layer1 = document.getElementById("layer1");
    ctx1 = layer1.getContext("2d");
    character.onload = imageOnLoad();
    character.src ="character.png";
    layer2 = document.getElementById("layer2");
    ctx2 = layer2.getContext("2d");
}
                        
function imageOnLoad(){
    loadedImagesCount++;
    window.alert(''+loadedImagesCount+ ' ' + background.complete + ' ' + character.complete);
    if (loadedImagesCount==NUM_OF_TILES) drawAll();
                        }

はimageOnLoad()2 回呼び出されます (予想どおり)。最初は、両方のイメージがロードされていることを (アラートを介して) 伝えます。2回目はキャラクター画像が読み込まれていると言われますが、背景画像はもう読み込まれていませんか? これはどのように可能ですか？なぜ画像を再度アンロードするのでしょうか? 更新後、これはもう発生しません。ページを初めてロードしたときにのみ発生します。

また、背景がロードされていないため、キャンバスを描画すると、文字だけが描画されます。

4

2 に答える 2

0

問題が解決しました。onload 変数には、括弧のないメソッドが必要です。括弧を使用すると、すぐにメソッドが呼び出されます。

于 2017-06-19T16:36:25.690 に答える