循环使用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，其中u在绘制画布的位置，每次

 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 <-是JS中的函数范围。

您的闭包函数中使用的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));
}