如何使用普通Javascript将画布元素旋转到鼠标位置？

我正在做一个迷你画布项目，我一直在试图弄清楚如何将画布元素（矩形、圆形）朝着鼠标旋转？我在网上搜索过，我看到的例子是人们使用图书馆。我知道使用图书馆会容易得多，但学习它需要时间。有没有一种方法可以使用纯本机JavaScript实现这一点

到目前为止，我得到的是：

class Player{
 constructor({x, y, radius, round}){
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.round = round;
  this.draw(x, y, radius, round);
}
draw(x, y, radius, round){
let that = this;
// begining the path for drawing so that the color doesn't over ride.
c.beginPath();
//this must be on top inorder for color to render.
that.color(player.style.color);
//drawing the rectangle
c.arc(x, y, radius, round, Math.PI * 2);
// creating the outline
c.fill();
// out line to the player
c.linewidth = 10;
// c.strokeStyle = "black";
c.stroke();
c.closePath();
}
 color(color){
  c.fillStyle = color;
  c.strokeStyle = "blue";
 }
}

一切都很好。我正在考虑如何让玩家旋转鼠标

这是代码笔的链接

---

提前感谢您的帮助。

因此，在尝试将您的代码和我的代码结合在一起之后，我想到了这一点

let canvas = document.getElementsByTagName("canvas");
canvas[0].setAttribute("id", "canvas");
//initializing the canvas
canvas = document.getElementById("canvas");
const c = canvas.getContext("2d");
//the width and height of the canvas
const width = window.innerWidth;
const height = window.innerHeight;

//setting the canvas width and height to be the windows
canvas.width = width;
canvas.height = height;

//the player information
let arm_color = "#e8d66f";
let player = {
position :{
x: 509,
y: 300
},
style:{
color: "#e8d66f",
radius: 40,
round: 0,
    stroke_color: "black"
},
};

//the arms
let arm1 = {
position :{
x: 47,
y: 1
},
style:{
color: arm_color,
radius: 15,
round: 0,
    stroke_color: "black"
},
};

let arm2 = {
position :{
x: 1,
y: 47
},
style:{
color: arm_color,
radius: 15,
round: 0,
    stroke_color: "black"
},
};


//drawing the player
class Player{
constructor({x, y, radius, round}){
this.x = x;
this.y = y;
this.radius = radius;
this.round = round;
    
    //calling the draw method
this.draw(x, y, radius, round);
}
draw(x, y, radius, round){
let that = this;
// begining the path for drawing so that the color doesn't over ride.
c.beginPath();
//this must be on top inorder for color to render.
that.color(player.style.color, player.style.stroke_color);
//drawing the rectangle
c.arc(x, y, radius, round, Math.PI * 2);
// creating the outline
c.fill();
// out line to the player
c.linewidth = 10;
// c.strokeStyle = "black";
c.stroke();
c.closePath();
}
color(color, stroke){
c.fillStyle = color;
c.strokeStyle = stroke;
}
}

//drawing the players arms
class Arm{
constructor({x, y, radius, round, color, strokeStyle}){
this.x = x;
this.y = y;
this.radius = radius;
this.round = round;
this.color = color;
    this.strokeStyle = strokeStyle;
this.draw(x, y, radius, round, color, strokeStyle);
}
draw(x, y, radius, round, color, strokeStyle){
let self = this;
c.beginPath();
c.fillStyle = color;
c.strokeStyle = strokeStyle;
c.arc(x, y, radius, round, Math.PI * 2);
c.fill();
c.stroke();
c.closePath();
}
}

//combining the player's body and arms and make them rotate
class Rotate{
constructor(options){
    this.cx = options.x;
    this.cy = options.y;
    this.radius = options.radius;
    this.color = options.color;
    this.angle  = 0;
    this.toAngle = this.angle;
    
    this.binding();
}
binding(){
    const self = this;
    window.addEventListener("mousemove", function(e){
        self.update(e.clientX, e.clientY);
    });
}
update(nx, ny){
    this.toAngle = Math.atan2(ny - this.cy, nx - this.cx);
}
render(){
    c.clearRect(0, 0, canvas.width, canvas.height);
    //saving the current status of the mouse
    c.save();
    //translating to the position of the mouse
    c.translate(player.position.x, player.position.y);
    if(this.toAngle !== this.angle){
        c.rotate(this.toAngle - this.angle);
    }
    
    //the players body
let hero = new Player({x: 0, y: 0, radius: player.style.radius, round: 
player.style.round});
    
    //the players first arm
let heroArm1 = new Arm({x: arm1.position.x, y: arm1.position.y, radius: 
arm1.style.radius, round: arm1.style.round, color: arm1.style.color, strokeStyle: 
arm1.style.stroke_color});
    
    //the players second arm
    let heroArm2 = new Arm({x: arm2.position.x, y: arm2.position.y, radius: 
arm2.style.radius, round: arm2.style.round, color: arm2.style.color, strokeStyle: 
arm2.style.stroke_color});
    c.restore();
 }
}

//combining the players arms and body together
let rotatingCircle = new Rotate({x:500, y:300, radius:player.style.radius, color: 
player.style.color});

---

谢谢您的帮助。

如果您的意思是将元素移动到鼠标位置，您可以检查我对代码做了一些更改。我的问题是如何将画布元素旋转到鼠标指针。比如2d射击游戏是如何做到的。但现在一切都好了。你的回答真的很有帮助，因为我可以重新布线，得到我想要的，这里是一个链接