绘制多个 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)];
}

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

我有什么遗漏吗？

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);
}

注意：我没有对此进行测试。