绘制多个 HTML 画布只会绘制最后一个画布

Question

在我正在编写的应用程序中，有一个页面，我从数据库中加载多个base64编码的图像并将它们放在JavaScript数组中。这是通过 EJS 模板在服务器上发生的，因此当用户收到 HTML 页面时，存在 base64 编码的图像（我检查了这个）。

下一步是在客户端使用 JavaScript 遍历画布，然后用其相应的图像数据填充每个画布。但是，我遇到了一些奇怪的行为。每次只填充最后一个画布。

for (var i = 1; i < 13; i++) {
    var ctx = document.getElementById('canvas-' + i).getContext('2d'),
        image = new Image();
    image.onload = function() {
        ctx.drawImage(image, 0, 0);
    }
    image.src = images[(i - 1)];
}

图像数组在此代码的正上方定义（在同一范围内）。如果我像这样执行代码，只会填充最后一个画布（ID 为"canvas-12"）。如果我将 for 循环结束条件降低到例如 i <11，则只会填充 ID 为"canvas-10"的画布。

我错过了什么吗？

Answer 1

这似乎是一个闭包问题;每次循环时，您都在更改onload函数中包含的对象ctx。您需要确保不会使用闭包在循环期间更新对象：

for (var i = 1; i < 13; i++) {
    var ctx = document.getElementById('canvas-' + i).getContext('2d'),
        image = new Image();
    (function(ctx, image) {
        image.onload = function() {
            ctx.drawImage(image, 0, 0);
        }
        image.src = images[(i - 1)];
    })(ctx, image);
}

注意：我还没有测试过这个。