javascript - 不在 html5 Canvas 中显示图像(javascript)

Question

我正在尝试展示棋盘上的棋子。问题是:如果我让“警报(img.src)”(从而创建很多警报框......)，片段将显示在正确的位置，但如果我删除警报，它只显示一个片段在我 Canvas 的右上角。

你认为发生了什么？谢谢!

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 .如果您将 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) ;
    }
}

单击此处获取 live example .

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