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＆lt; 11，只有id为'canvas-10'的画布才会被填充。

我有什么遗失的吗？

Answer 1

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

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

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

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

1 个答案: