javascript - 绘制多个 HTML canvas 只绘制最后一个？

Question

在我编写的应用程序中有一个页面，我在其中从我的数据库加载多个 base64 编码的图像并将它们放在一个 JavaScript 数组中。这是通过 EJS 模板在服务器上发生的，所以当用户收到 HTML 页面时，会出现 base64 编码的图像(我检查过这个)。

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

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 数组是在这段代码的正上方定义的(在同一范围内)。如果我执行这样的代码，只会填充最后一个 Canvas (ID 为“canvas-12”)。例如，如果我将 for 循环结束条件降低到 i < 11，则只会填充 ID 为“canvas-10”的 Canvas 。

有什么我想念的吗？

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

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