html画布有的电脑显示不出来桌面,不在html5画布中显示图像(javascript)

我正试图在棋盘上展示棋子.问题是：如果我让“警报(img.src)”(从而创建了很多警报框……),件会在正确的位置显示,但如果我删除警报,它只显示一件在我画布的右上角.

你觉得怎么样？谢谢！

for (var i=1;i<9;i++){

for (var j=1;j<9;j++){

var img=new Image();

img.οnlοad=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);

}

}

解决方法:

你的问题是Javascript关闭.如果您不知道这一点,look it up.如果您向onload函数添加警报(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.οnlοad=function(){

ctx.drawImage(img,sqs*(i-1),sqs*(j-1),32,32);

};

img.src="http://placekitten.com/"+(30+i)+"/"+(30+j);

})(i,j,img) ;

}

}

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

标签：javascript,closures,html5,canvas

来源： https://codeday.me/bug/20190621/1252720.html