javascript：キャンバス上のイメージ描画（背景）

Question

問題は私が最初に背景を描くことができず、背景の上に他のすべてを描くことができないということです。私のコードのいくつかの場所（ループ関数内）では動作しますが、私の初期化関数では動作しません。最初に私のコードに少し紹介：背景IMGを取得し、それを描画するための

コード：

function imgImport(imgName,ctx){ 
    var img = new Image(); 
    img.onload = function(){ 
     ctx.drawImage(img,0,0); 
    }; 
    img.src = 'client/img/' + imgName + '.jpg'; 
} 

module.exports = imgImport; 

クール、今、私の初期化関数に私はこのような上記のコードを使用：

// var img = new Image(); 
// img.src = 'client/img/spaceship.jpg'; 
// ctx.drawImage(img,0,0); 
Img('spaceship',ctx); 
drawGrayzonePlanets(ctx,serverObjects); 

を

コメントアウトされた3行を今は気にしないでください。最初のアクティブ行Img（ 'spaceship'、ctx）：nodejsを介して使用される上記のimgImport関数です。 DrawGrayzonePlanetsは以下見ることができます：

function drawGrayzonePlanets(ctx,serverObjects){ 
    for(object in serverObjects){ 
    obj = serverObjects[object]; 
    Drawobjects(ctx,obj); 
    } 
} 

は、基本的に上記の機能は、サーバーからデータを取得し、このように見える、惑星を描画するDrawobjects（）関数を使用しています。

今

function drawObjects(ctx,status){ 
    switch(status.shape){ 
     case "circle": 
     var status = status.cic; 
     console.log(status); 
     ctx.fillStyle = status.color; 
     ctx.beginPath(); 
     ctx.arc(status.x,status.y,status.planetSize,0,2*Math.PI); 
     ctx.stroke(); 
     ctx.fill(); 
     break; 
    } 
} 

module.exports = drawObjects; 

私が実行した場合Img（）関数は最初にdrawGrayzonePlanets（）関数を実行した後、惑星はバックグラウンドの背後に描画され、見ることができません。明らかにコードの順序を変更しても同じことが起こります。今、私は3行のコメントを外してimg（）関数からコメントを外してこの問題を解決する方法を見つけました。 drawGrayzonePlanets（）関数を保持します。そうですね：

var img = new Image(); 
img.src = 'client/img/spaceship.jpg'; 
ctx.drawImage(img,0,0); 
//Img('spaceship',ctx); 
drawGrayzonePlanets(ctx,serverObjects); 

上記のコードは動作し、惑星はバックグラウンドで描画されます。しかし、私はちょうどImg（）関数を使用するだけでなく、そのメソッドが動作する理由を理解できません。それはimg.onload = function（）{}かもしれませんが、私はなぜそれを見ることができませんか？

誰かが実際に何が起こっているのか説明できますか？

Answer 1

あなたのimgImportは非同期関数なので、 img.onloadのコードは、画像がロードされた後に実行されますが、画像がロードされている間は残りのコードが実行され、惑星を描画します。その後、しばらくすると、イメージが到着し、それを上に描画します。

あなたは、例えば、imgImport機能に第三のコールバックの引数を与え、そこにあなたのコードの残りの部分を実行することができます：

function imgImport(imgName,ctx,callback){ 
    var img = new Image(); 
    img.onload = function(){ 
     ctx.drawImage(img,0,0); 
     callback() 
    }; 
    img.src = 'client/img/' + imgName + '.jpg'; 
} 

そして、このようにそれを実行します。あなたの最初で

Img('spaceship',ctx,function() { 
    drawGrayzonePlanets(ctx,serverObjects); 
}); 

Answer 2

ロードを完了するためにバックグラウンドを待っているコードを作ってから描画してください。これは、他の画像の描画よりもむしろ遅れている。 2番目のコードでは、読み込みを待っていません。

function imgImport(imgName,ctx,callback){ 
    var img = new Image(); 
    img.onload = function(){ 
    ctx.drawImage(img,0,0); 
    callback(); 
    }; 
    img.src = 'client/img/' + imgName + '.jpg'; 
} 

次のように使用より：最良のソリューションは、コールバックになり

Img('spaceship',ctx,function(){ 
    alert("bckground loading finished. Continue loading..."); 
    drawGrayzonePlanets(ctx,serverObjects); 
});