在循环中使用 HTML/Javascript drawImage

Question

我正在使用 HTML5 画布构建纸牌游戏，但在循环中遇到了 drawImage 问题。这似乎是闭包的问题，​​但我不确定闭包如何适用于我的情况。

for (var i = 0; i < length; i++) {  
    var x = start + i * cardWidth
    var y = start
    $(anObject.image).load(function() {
        context.drawImage(anObject.image, x, y);
    });
}

此函数的输出只是将最后一个图像对象写入画布，尽管它在循环中使用了 30 多次迭代。我将如何对这个函数应用闭包并写入我的所有图像？

编辑

抱歉，我应该发布更多关于 x 和 y 更新的详细信息。我已经相应地更新了代码。我知道 x 和 y 值正在正确更新，因为我还将它们输出到画布旁边的调试 DIV。

Answer 1

您需要更改 x 和 y 每次您正在绘制画布的位置，请为上述情况找到以下伪代码

 charcterIndentifier = {
                 C1: { X: 0, Y: 0, ImgId: "00", adjacentId: ["c2", "c9", "c10"],color:"B" },
                 C2: { X: 1, Y: 0, ImgId: "10", adjacentId: ["c1", "c9", "c10", "c11", "c3"], color: "B" },
                 C3: { X: 2, Y: 0, ImgId: "20", adjacentId: ["c2", "c4", "c10", "c11", "c12"], color: "B" },
                 C4: { X: 3, Y: 0, ImgId: "30", adjacentId: ["c3", "c5", "c13", "c11", "c12"], color: "B" },
                 C5: { X: 4, Y: 0, ImgId: "40", adjacentId: ["c4", "c6", "c13", "c14", "c12"], color: "B" },
                 C6: { X: 5, Y: 0, ImgId: "50", adjacentId: ["c5", "c7", "c13", "c14", "c15"], color: "B" },
                 C7: { X: 6, Y: 0, ImgId: "60", adjacentId: ["c6", "c8", "c16", "c14", "c15"], color: "B" },
                 C8: { X: 7, Y: 0, ImgId: "70", adjacentId: ["c7", "c16", "c15"], color: "B" },
                 C9: { X: 0, Y: 1, ImgId: "11", adjacentId: "BlackSoldier", color: "B" },
                 C10: { X: 1, Y: 1, ImgId: "11", adjacentId: "BlackSoldier", color: "B" },
                 C11: { X: 2, Y: 1, ImgId: "11", adjacentId: "BlackSoldier", color: "B" },
                 C12: { X: 3, Y: 1, ImgId: "11", adjacentId: "BlackSoldier", color: "B" },
                 C13: { X: 4, Y: 1, ImgId: "11", adjacentId: "BlackSoldier", color: "B" },
                 C14: { X: 5, Y: 1, ImgId: "11", adjacentId: "BlackSoldier", color: "B" },
                 C15: { X: 6, Y: 1, ImgId: "11", adjacentId: "BlackSoldier", color: "B" },
                 C16: { X: 7, Y: 1, ImgId: "11", adjacentId: "BlackSoldier", color: "B" },
                 C17: { X: 0, Y: 6, ImgId: "66", adjacentId: "WhiteSoldier", color: "W" },
                 C18: { X: 1, Y: 6, ImgId: "66", adjacentId: "WhiteSoldier", color: "W" },
                 C19: { X: 2, Y: 6, ImgId: "66", adjacentId: "WhiteSoldier", color: "W" },
                 C20: { X: 3, Y: 6, ImgId: "66", adjacentId: "WhiteSoldier", color: "W" },
                 C21: { X: 4, Y: 6, ImgId: "66", adjacentId: "WhiteSoldier", color: "W" },
                 C22: { X: 5, Y: 6, ImgId: "66", adjacentId: "WhiteSoldier", color: "W" },
                 C23: { X: 6, Y: 6, ImgId: "66", adjacentId: "WhiteSoldier", color: "W" },
                 C24: { X: 7, Y: 6, ImgId: "66", adjacentId: "WhiteSoldier", color: "W" },
                 C25: { X: 0, Y: 7, ImgId: "07", adjacentId: ["c2", "c9", "c10"], color: "W" },
                 C26: { X: 1, Y: 7, ImgId: "17", adjacentId: ["c2", "c9", "c10"], color: "W" },
                 C27: { X: 2, Y: 7, ImgId: "27", adjacentId: ["c2", "c9", "c10"], color: "W" },
                 C28: { X: 3, Y: 7, ImgId: "37", adjacentId: ["c2", "c9", "c10"], color: "W" },
                 C29: { X: 4, Y: 7, ImgId: "47", adjacentId: ["c2", "c9", "c10"], color: "W" },
                 C30: { X: 5, Y: 7, ImgId: "57", adjacentId: ["c2", "c9", "c10"], color: "W" },
                 C31: { X: 6, Y: 7, ImgId: "67", adjacentId: ["c2", "c9", "c10"], color: "W" },
                 C32: { X: 7, Y: 7, ImgId: "77", adjacentId: ["c2", "c9", "c10"], color: "W" },
                 id: "one"
             };

 var canvas = document.getElementById(canvasId);
            var ctx = canvas.getContext('2d');
            var width = canvas.offsetWidth;
            var height = canvas.offsetHeight;
            var xwidth = width / 8;
            var yheight = height / 8;
            var xposition, yposition;
 for (var key in charcterIndentifier) {
                if (key.toString() != "id") {
                    xposition = charcterIndentifier[key].X * xwidth;
                    yposition = charcterIndentifier[key].Y * yheight;
                    ctx.save();
                    ctx.translate(xposition, yposition);
                    ctx.drawImage(document.getElementById(charcterIndentifier[key].ImgId), 14, 5);
                    ctx.restore();
                }
            }

Answer 2

Var

闭包函数中使用的 x 和 y 将是它们收到的最后一个值。

要克服这个问题，您需要一个返回函数的函数。

for (var i = 0; i < length; i++) {  
    var x = start + i * cardWidth
    var y = start
    $(anObject.image).load((function(a, b) {
        return function() {
            context.drawImage(anObject.image, a, b);
        };
    })(x, y));
}