不在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關閉。 如果您對此不了解， 請查閱 。 如果你向你的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) ;
    }
}

點擊此處查看實時示例 。

順便說一下，當你有alert(img.src)語句時你的代碼工作的原因是你在每次迭代時都停止循環，這會導致你的onload函數（在圖像加載之前不會執行） ）正在使用正確的i和j 。 如果沒有alert語句，則在任何圖像加載時循環設置(i,j)到(9,9) 。