Javascript将图像绘制在彼此之上

Javascript paints images over top of each other

本文关键字：图像 绘制 Javascript      更新时间：2023-09-26

我使用node.js + socket。我想尝试制作一款乘数化的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';
}

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+")");
}
相关文章：