不显示html5画布中的图像（JavaScript）

Question

不显示html5画布中的图像（JavaScript）

4

我正在尝试在棋盘上展示棋子。问题是：如果我让"alert(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);
    }
}

- user1011444

1

请问您能否在http://jsfiddle.net/上复现它？ - Alex Turpin

谢谢您的回复。我尝试了，但问题在于我的脚本文件使用了图片。不过您的网站非常棒。 - user1011444

将图像URL替换为随机图像URL，例如http://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/Chess_kdt45.svg/50px-Chess_kdt45.svg.png。 - Alex Turpin

再次感谢您抽出时间。我无法看到“结果”，因此我上传了我的文件：http://www.mediafire.com/?c8qwut8ls8dgl1v。再次感谢。 - user1011444

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- brainjam · Accepted Answer

您的问题出在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)。