Question

如何在循环内的画布上设置多个图像的位置？以下似乎适用于：

for (var i=1; i<10; i++) {
  images[i]=new Image();
  images[i].onload = function() {
    drawImage(this, 1, 1, i*50, 700, "bulb"+i);
    // THE POSITION CANNOT BE SET ; i IS ALWAYS 500
  }
  images[i].src = folder+src[i];
}

Answer 1

在您的示例中，i在函数外部具有闭包，因此其值与循环结束时的值相关联。

你可以这样解决：

for (var i=1; i<10; i++) {
  images[i]=new Image();
  images[i].onload = (function(x) {
    return function () {
      drawImage(this, 1, 1, x*50, 700, "bulb"+x);
    };
  }(i));
  images[i].src = folder+src[i];
}

这为每个onload函数创建了一个新的闭包，并将其分配给x每个循环迭代。

请注意，这是一个相当common JavaScript error

kineticjs - 在循环中设置画布上多个图像的位置

1 个答案: