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关闭。如果您对此不了解，look it up。如果在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) ;
    }
}

点击此处查看live example。

顺便说一下，当你有alert(img.src)语句时你的代码工作的原因是你在每次迭代时停止循环，这会影响你的onload函数（直到图像才会执行）已加载）使用了正确的i和j。如果没有alert语句，则在任何图片加载时，循环会将(i,j)设置为(9,9)。

不在html5画布中显示图像（javascript）

1 个答案: