在循環中使用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

瓦爾< - 在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)); 
}