画像データの操作後に無限大を取得する

Question

私はjavascriptを初めて使いました。今はキャンバスで作業することを学んでいます。私のキャンバスにイメージが何回収まるのかを簡単にチェックしたかったのですが、何らかの理由で、このスクリプトをページをリフレッシュした後に実行するたびに、 'wbok'と 'wdol'は「無限大」ですが、 Firefoxで1回、チェックしたときにChromeで2回連続して、スクリプトを実行するたびに（これはonclickによって呼び出される関数です）、除算の適切な結果が得られます。

var c = document.getElementById('canvas').getContext('2d'); 
var myimg = new Image(); 
myimg.src = 'myimg.png'; 
var wbok = canvas.width/myimg.width; 
var wdol = canvas.height/myimg.height; 
console.log(wbok, wdol); 

私はそれがイメージがキャンバスにロードする方法とは何かだ疑いがあるが、私は詳細を把握し、どのようにそれを修正することはできません。私はまた、画像ソースを設定する前と後にonload関数を入れてみました：

myimg.onload = function() { 
    c.drawImage(myimg, 0,0); 
} 

まだ同じ問題。

Answer 1

myimg.onload = function() { 
    c.drawImage(myimg, 0,0); 
} 

このコードは、読み込みが完了次第、キャンバスに画像を描画します。しかし、これは非同期操作であり、イメージオブジェクトのonloadプロパティにコールバック関数を割り当てるため、この関数はロードが完了した後にのみ呼び出されます。

var wbok = canvas.width/myimg.width; 
var wdol = canvas.height/myimg.height; 

しかし、画像はまだバックグラウンドでロードすることができるので、寸法が不明であってもよいし、あなたが見るので、無限大/無限大：それはすぐに次の行に向けて移動しますので、これは、プログラムをブロックしません。出力。代わりに、画像が読み込まれた後、キャンバスの幅と高さをコールバック関数内で照会する必要があります。

myimg.onload = function() { 
    c.drawImage(myimg, 0,0); 
    var wbok = canvas.width/myimg.width; 
    var wdol = canvas.height/myimg.height; 
    console.log(wbok, wdol); 
}