javascript - 使用 for 循环在 Canvas 中绘制 img

Question

var c=document.getElementById("cvs");
var ctx=c.getContext("2d");
var imgArray = [];          
for (var i=0;i<data.length;i++){
    var drawRepeat = Math.floor((data[i]/divider)); 
    imgArray[i] = [];   
    for (var j=0;j<drawRepeat;j++){
            //alert(j);
        var xPos = ((i*30)+10);
        var yPos = 250-((j*30)+30);
        imgArray[i][j] = new Image();
        imgArray[i][j].src="assets/orange.png";
        imgArray[i][j].onload = function(){
        ctx.drawImage(imgArray[i][j],xPos,yPos);
        };

    }
}

我想用 for 循环绘制多个图像。奇怪的是，当我将 alert() 与 for 循环一起工作时，它会起作用吗？但如果我把它评论掉，它只会显示一张图片。

有什么解决办法吗？

Answer 1

这就是与闭包相关的问题。我会在给出代码后进行解释。

var c = document.getElementById("cvs");
var ctx = c.getContext("2d");
var imgArray = [];
for (var i = 0; i < data.length; i++) {
    var drawRepeat = Math.floor((data[i] / divider));
    imgArray[i] = [];
    for (var j = 0; j < drawRepeat; j++) {
        //alert(j);
        (function (_i, _j) {
            var xPos = ((_i * 30) + 10);
            var yPos = 250 - ((_j * 30) + 30);
            imgArray[_i][_j] = new Image();
            imgArray[_i][_j].src = "assets/orange.png";
            imgArray[_i][_j].onload = function () {
                ctx.drawImage(imgArray[_i][_j], xPos, yPos);
            };
        })(i, j);
    }
}

更新:

我做这些奇怪的事情的原因是函数注册到 onload事件将被异步调用 - 即循环将继续并且该函数将在图像加载时调用，而不是在那个时刻调用。所以发生的是这个循环继续，一旦它完成(注意这甚至可能在完成之前发生)，i的值将为 data.length - 1 .现在，加载了一些图像，然后调用了该函数。此功能引用i (在您提供的代码中)，现在是 data.length - 1 .因此，只绘制最后一张图像。我知道这很令人困惑——甚至当我第一次偶然发现闭包时我也感到很困惑。我建议您阅读一些关于它们的好文章，您会发现问题所在。

我们所做的是创建一个作用域(专家可能会发现这个表达式有问题)，方法是创建一个立即调用的匿名函数，并传递给i 的值。和 j因为它的参数 - _i和 _j (请注意，我们可以使用相同的名称，但为了避免混淆，我没有使用相同的名称)。现在，这些是函数的局部变量，不会被更改。所以，当i加载图像时，调用它的 onload 函数绘制 _i数组中的第 th 个图像。

我没能很好地解释它，所以正如我所说，请阅读一些关于闭包的文章。