JS Canvas图像只会加载一次[重复]

Question

我正在尝试编写一种画布绘图算法，该算法为数组中的每个元素绘制一个图像。 （例如[[0,0,0,0], [0,0,0,0]] 将产生 2*4 的草纹理）。但由于某种原因，图像只会加载一次。根据调试，没有错误并且循环正常工作，但图像只加载一次。我查看了 MDN，但我无法发现问题所在。有人可以帮忙吗？

for (rows in world) {
                for (tile in world[rows]) {
                        var toDraw = {img: new Image(), x: rows * 64, y: tile * 64}
                        toDraw.img.addEventListener('load', function() {
                                ctx.drawImage(toDraw.img, toDraw.x, toDraw.y);
                        }, false);
                        switch(world[rows][tile]) {
                                case 0:
                                        toDraw.img.src = "GrassTexture.png";
                                        break;
                        }
                }
        }

Answer 1

当然，问题在于 toDraw 是一个非局部变量（它使用 var 并因此使用函数范围。）我通过将其更改为 let 来修复它。