HTML5 Canvas游戏玩家限制

Question

I placed 1000 players on canvas but their movement is not smooth. Is there a way for canvas to handle that much players? What options do I have?

Position of players is sent 20 times per second using socket.IO. When event reach client it draws players on canvas.

var images = {};
images.spriteSheet = new Image();
images.spriteSheet.src = "/images/spriteSheet.png";

socket.on('drawing', function(data){

  ctx.clearRect(0,0,1000,500);

  for(var i = 0; i < data.length; i++){

    ctx.drawImage(images['spriteSheet'], data[i].sx, data[i].sy, 100, 100, data[i].x, data[i].y, 70, 70);

  }

});

Answer 1

I placed 1000 players on canvas but their movement is not smooth. Is there a way for canvas to handle that much players?

I assume you mean you're drawing 1,000 sprites to a canvas 20x per second. No doubt, that's going to be tough.

Position of players is sent 20 times in a second using socket.IO.

Surely you can send a position and vector instead, and let the client update per-frame locally, predictively, until the next real update. That's how pretty much all other games work, and for a reason. This idea that you can even get data 20 times a second isn't always going to be the case.

Without more details it's hard to give a specific answer, but in the general case I'd suggest looking into SVG. Then, you can update individual elements and let the browser worry about compositing and what not, which is likely going to be faster than what you can pull off in the canvas. You'll have to experiment though for your specific use case.