Javascript 如何使用JS ctx.translate函数将播放器锁定在屏幕中央？

我有下面的JS函数来渲染视口中心的“播放器”

//状态每60毫秒触发一次
socket.on（'state'，（gameState）=>{
//遍历游戏状态玩家
for（让玩家处于游戏状态。玩家）{
//吸引每个玩家
renderEnemies（gameState.players[player]）；
}
});
函数renderemies（播放器）{
const ctx=document.getElementById（'gameboard'）.getContext（'2d'）；
const canvas=document.getElementById（'gameboard'）；
//将播放器与视口中心对齐（断开）
ctx.translate（canvas.width/2-player.x，canvas.height/2-player.y）；
//彩色播放器红色
ctx.fillStyle=“#FF0000”；
//将玩家添加到画布（游戏板）
ctx.fillRect（player.x，player.y，player.width，player.width）；
}

但是，renderemies函数的translate部分不起作用。我已经尝试过ctx.clear（）和restore，但没有效果

如果有人能给我指出正确的方向，我将不胜感激。 谢谢

更新：我已经用下面的代码修复了视口错误，但是玩家的移动现在被打断了。绘图函数现在如下所示：

函数渲染器（播放器）{
const ctx=document.getElementById（'gameboard'）.getContext（'2d'）；
const canvas=document.getElementById（'gameboard'）；
ctx.save（）；
clearRect（0，0，canvas.width，canvas.height）；
ctx.translate（window.innerWidth/2-player.x，window.innerHeight/2-player.y）；
ctx.fillStyle=“#FF0000”；
ctx.fillRect（player.x，player.y，player.width，player.width）；
ctx.restore（）；
}

这可能是因为您在绘制后没有保存和还原，或者至少没有转换回原图。正如您在下面的代码片段中所看到的，如果我在没有执行任何操作的情况下进行翻译，则可能会错误地翻译敌人（在本例中为画布外）

取消注释后，请正确保存并还原注释。您也可以在绘制后通过添加负值将其转换回去。因此，在下面的snippete中，您可以注释掉

save（）

和

reastore（）

并取消注释第二个

translate

，得到相同的结果

let canvas=document.getElementById（“canvas”）；
设ctx=canvas.getContext（“2d”）；
画布宽度=300；
帆布高度=300；
ctx.fillStyle=“浅灰色”；
ctx.fillRect（0，0，canvas.width，canvas.height）；
阶级敌人{
构造函数（x，y）{
这个.x=x；
这个。y=y；
这是w=20；
这个h=20；
这个.c=“蓝色”；
}
画（）{
ctx.save（）；
ctx.translate（canvas.width/2-this.w/2，canvas.height/2-this.h/2）；
//彩色播放器红色
ctx.fillStyle=“#FF0000”；
//将玩家添加到画布（游戏板）
ctx.fillRect（this.x，this.y，this.w，this.h）；
ctx.restore（）；
//ctx.translate（-（canvas.width/2-this.w/2），-（canvas.height/2-this.h/2））；//或者使用
}
}
让enemy1=新敌人（0,0）；
函数animate（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.fillStyle=“灰色”；
ctx.fillRect（0，0，canvas.width，canvas.height）；
enemy1.draw（）；
请求动画帧（动画）；
}
制作动画（）
谢谢！我用window.innerWidth和Height修复了它，但现在它的移动出现了问题。我知道这有很多问题要问，但是你能看看我对这个问题的编辑，以及更新的代码，并试图找出为什么这个动作不起作用吗？我认为这与我的ctx.save（）和ctx.restore（）有关。我更新了我的评论，试图使
翻译更清晰。另外，如果它打断了你的移动，我想知道你是否在画布上设置了碰撞检测，也许因为翻译错误，它一直在碰撞。