在html5畫布中未顯示圖像（javascript）

Question

我正試圖在棋盤上顯示棋子。事情是：如果我讓「警報（img.src）」（因此創建了很多警報框......），碎片會顯示在正確的位置，但是如果我刪除警報，則只顯示一個碎片在我畫布的右上角。

您認爲正在發生什麼？謝謝！

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。如果您將一個alert(i+','+j+','+img.src)添加到您的onload函數並運行您的程序，您會看到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)。