Javascript将图像绘制在彼此的上方

我正在使用node.js+socket.io尝试制作一个倍增HTML5画布游戏。不幸的是，每次我去画所有的球员，所有的图像最终都在彼此的上面

socket.on('drawPlayers', function(players){
    context.clearRect ( 0 , 0 , gameWidth , gameHeight ); //clear canvas

    for(var i=0; i<players.length; i++){
      var cur = players[i];
      var playerSprite = new Image();
      playerSprite.onload = function() {
        return context.drawImage(playerSprite, cur.x, cur.y);
      };
      playerSprite.src = 'images/sprite.png';
      console.log("drawing player "+cur.un+" at ("+cur.x+","+cur.y+")");
    }
  });

---

乔纳森·洛诺夫斯基是对的。对于每个onload触发器，

cur

指向同一个播放器，即最后一个播放器。事件处理程序中只有一个

cur

使用此选项将

cur

的范围与循环中的范围分开：

function draw(sprite,cur){
  return function() {
    context.drawImage(sprite, cur.x, cur.y);
  };
}

然后从循环内部调用它

for(var i=0; i<players.length; i++){
  var cur = players[i];
  var playerSprite = new Image();
  playerSprite.onload = draw(playerSprite,cur);
  playerSprite.src = 'images/sprite.png';
  console.log("drawing player "+cur.un+" at ("+cur.x+","+cur.y+")");
}

---

for（var i=0；我尝试在
playerSprite.onload=function（）{
中进行一些调试相关：。尽管放置了声明，
cur
和
playerSprite
只声明一次，并由循环的所有迭代共享。因此每个迭代都有自己的
cur
和
playerSprite
。
for(var i=0; i<players.length; i++){
  var cur = players[i];
  var playerSprite = new Image();
  playerSprite.onload = draw(playerSprite,cur);
  playerSprite.src = 'images/sprite.png';
  console.log("drawing player "+cur.un+" at ("+cur.x+","+cur.y+")");
}