不在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关闭.如果您对此不了解,请查阅.如果你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) ;
    }
}

点击此处查看实时示例.

顺便说一下,当你有alert(img.src)语句时你的代码工作的原因是你在每次迭代时停止循环,这会导致你的onload函数(在图像加载之前不执行)正在使用正确的i和j.如果没有该alert语句,则循环在任何图像加载时设置(i,j)为(9,9).