我在 Canvas 上放置了 1000 个玩家，但他们的移动并不流畅。 Canvas 有办法处理那么多玩家吗？我有什么选择？
使用 socket.IO 每秒发送 20 次玩家位置。当事件到达客户端时，它会将玩家绘制在 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);
}
});
最佳答案
I placed 1000 players on canvas but their movement is not smooth. Is there a way for canvas to handle that much players?
我假设您的意思是您每秒以 20 倍的速度在 Canvas 上绘制 1,000 个 Sprite 。毫无疑问，这将是艰难的。
Position of players is sent 20 times in a second using socket.IO.
当然，您可以改为发送位置和矢量，并让客户端预测性地在本地更新每帧，直到下一次真正的更新。几乎所有其他游戏都是这样运作的，而且是有原因的。您甚至可以每秒获取 20 次数据的想法并不总是如此。
如果没有更多细节，很难给出具体的答案，但在一般情况下，我建议研究 SVG。然后，您可以更新各个元素并让浏览器担心合成以及其他什么，这可能会比您在 Canvas 中完成的速度更快。不过，您必须针对您的特定用例进行试验。
关于javascript - HTML5 Canvas 玩家限制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50687437/