如何使用香草Javascript将画布元素旋转到鼠标位置

Question

我正在做一个迷你画布项目，我一直在想如何将画布元素(矩形、圆形(朝鼠标旋转？我在网上搜索过，我看到的例子是人们使用图书馆。我知道使用库会容易得多，但学习它需要时间。有没有一种方法可以使用纯原生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";
}
}

一切都很好。我只是在考虑如何让玩家旋转到鼠标上。

这是代码笔的链接

https://codepen.io/robotosail/pen/abJLQKp

提前感谢你的帮助。

Answer 1

因此，在尝试将您的代码和我的代码组合在一起之后，我想到了以下内容。

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});

谢谢你的帮助。