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

每次pls为上述情况找到下面的伪代码时，您需要更改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＆lt; - 是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));
}

在循环中使用HTML / Javascript drawImage

2 个答案: