Javascript 在另一个画布图像上旋转图像

目前，我正在制作一个游戏，需要使图像朝着光标旋转。我使用的是node，但图像位于HTML文件中的js标记中，该文件使用ctx绘制图像

如果我放置一个

ctx.rotate（角度）几乎任何地方，它都会旋转一切；玩家、地图等。我需要帮助，以便只旋转玩家

这是我的代码的简化版本：

<canvas id="ctx" width="200" height="200"></canvas>
<script>
  //game
    var ctx = document.getElementById("ctx").getContext("2d");

    var WIDTH = 200;
    var HEIGHT = 200;
    var Img = {};

    //player
    Img.player = new Image();
    Img.player.src = '/client/img/player.png';

    var Player = function(/*node*/){
      ctx.drawImage(Img.player, ...);
    }

    //map
    Img.map = new Image();
    Img.map.src = '/client/img/map.png';

  //display everything
  setInterval(function(){
        ctx.clearRect(0,0,200,200);
        drawMap();
        for(var i in Player.list)
            Player.list[i].draw();
    },1000/60);

//functions

  //move map so that player is always in the middle
    var drawMap= function(){
        var x = WIDTH/2 - Player.list[/*node*/].x;
        var y = HEIGHT/2 - Player.list[/*node*/].y;
        ctx.drawImage(Img.map,x,y);
   }
</script>



//游戏
var ctx=document.getElementById（“ctx”）.getContext（“2d”）；
var宽度=200；
var高度=200；
var Img={}；
//玩家
Img.player=新图像（）；
Img.player.src='/client/Img/player.png'；
var Player=函数（/*节点*/）{
ctx.drawImage（Img.player，…）；
}
//地图
Img.map=新图像（）；
Img.map.src='/client/Img/map.png'；
//展示一切
setInterval（函数（）{
ctx.clearRect（0,0200200）；
drawMap（）；
for（Player.list中的变量i）
Player.list[i].draw（）；
},1000/60);
//功能
/移动地图，使玩家总是在中间
var drawMap=函数（）{
var x=WIDTH/2-Player.list[/*节点*/].x；
变量y=高度/2-玩家列表[/*节点*/].y；
ctx.drawImage（图像映射，x，y）；
}
以下是您可能正在寻找的示例


const ctx=document.getElementById（“ctx”）.getContext（“2d”）；
常数宽度=500，
高度=500；
document.getElementById（“ctx”）。高度=高度；
document.getElementById（“ctx”）.width=width；
变量播放器={
x:50，
y:55，
角度：0
}
document.addEventListener（“mousemove”，（事件）=>{
var x=event.clientX-Player.x，
y=event.clientY-Player.y，
角度=数学常数2（y，x）；
Player.angle=角度
})
函数绘图（）{
window.requestAnimationFrame（绘制）；
ctx.clearRect（0，0，宽度，高度）；
ctx.save（）；
翻译（Player.x，Player.y）；
ctx.旋转（播放器角度）；
ctx.translate（-Player.x，-Player.y）；
ctx.fillRect（Player.x，Player.y，20,20）；
ctx.restore（）；
ctx.fillRect（150,50,20,20）；
}
draw（）
在执行
ctx.save（）
之前，您是否在执行
ctx.restore（）
旋转后还原它。保存和还原做什么？JSFIDLE对我不起作用，但代码片段是，也许鼠标侦听器对JSFIDLE不起作用？我有两个图像，但只是尝试旋转一个，而是两个都旋转。
save
和
restore
方法保存画布的当前状态，然后在save和restore方法之间执行代码后将其还原