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

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

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

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); 
    } 
}

來源

2011-10-24 user1011444

你可以在http://jsfiddle.net/上重現嗎？ –

感謝您的回覆。我試過但問題是我的腳本文件使用圖像。雖然優秀的網站。 – user1011444

用像這樣的隨機圖片URL替換圖片網址http://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/Chess_kdt45.svg/50px-Chess_kdt45.svg.png –

你的問題是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)。

來源

2011-10-24 22:30:47 brainjam

非常感謝，不僅是爲了找到錯誤，而且還爲了取得有時間詳細解釋。我是JavaScript新手，這對我有很大幫助。再次感謝。 – user1011444

你保存了一天！感謝分享！（y）的 – haifacarina

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

回答

相關問題