html5キャンバス（javascript）に画像が表示されていません

Question

ボード上にチェスを表示しようとしています。事は：「アラート（img.src）」（アラートボックスをたくさん作成する）をすると、適切な場所に作品が表示されますが、アラートを削除すると1つだけ表示されます私のキャンバスの右上隅にあります。

あなたは何が起こっていると思いますか？ありがとう！

for (var i=1;i<9;i++){ 
    for (var j=1;j<9;j++){ 
     var img=new Image(); 
     img.onload=function(){ 
       ctx.drawImage(img,p+sqs*(i-1)+(sqs-32)/2,p+bds-sqs*j+(sqs-32)/2,32,32); 
     }; 
     img.src="img/"+squares[i][j]+".png"; 
     //alert(img.src); 
    } 
} 

Answer 1

問題はJavascriptクロージャです。あなたがこれについて知らないなら、look it up。 onload関数にalert(i+','+j+','+img.src)を追加してプログラムを実行すると、onload関数がループ変数の最終値、つまり9,9を使用していることがわかります。

実際に渡したい値を渡すには、自己呼び出し匿名関数を使用して新しいスコープを作成する必要があります。したがって、コードは次のようになります。

for (var i=1;i<9;i++){ 
    for (var j=1;j<9;j++){ 
     var img=new Image(); 
     (function(i,j,img){ 
      img.onload=function(){ 
       ctx.drawImage(img,sqs*(i-1),sqs*(j-1),32,32); 
      }; 
      img.src="http://placekitten.com/"+(30+i)+"/"+(30+j); 
     })(i,j,img) ; 
    } 
} 

live exampleはここをクリックしてください。

ところで、alert(img.src)ステートメントを実行したときにコードが動作した理由は、すべての反復でループを停止していたため、onload関数（イメージがロードされるまで実行されません）正しいiとjを使用していました。 alertステートメントがない場合、ループは画像がロードされた時点で(i,j)〜(9,9)に設定されます。