Javascript 将图像相互叠加答案

【问题标题】：Javascript paints images over top of each otherJavascript 将图像相互叠加
【发布时间】：2013-06-03 01:32:12
【问题描述】：

我正在使用 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+")");
    }
  });

console.log() 将正确记录不同的 x 和 y 值，但所有图像最终会相互重叠。

function player(id,username){
  this.id = id;
  this.un = username;
  this.y = Math.floor(Math.random() * 501);
  this.x = Math.floor(Math.random() * 801);
  this.src = 'images/mobile_md_logo.png';
}

我

【问题讨论】：

尝试在playerSprite.onload = function() {中进行一些调试？
相关：stackoverflow.com/q/1451009。尽管放置了声明，cur 和 playerSprite 只声明一次并由循环的所有迭代共享。 You'll want a closure 所以每次迭代都有自己的 cur 和 playerSprite。

标签： javascript html node.js socket.io html5-canvas

【解决方案1】：

Jonathan Lonowski 是对的。对于每个 onload 触发器，cur 指向同一个播放器，即最后一个。在drawPlayers 事件处理程序中只存在一个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+")");
}

【讨论】：