Блог

Я работаю над проектом мини-холста и пытаюсь понять, как повернуть элемент холста (прямоугольник, круг) в направлении мыши? Я искал его в Интернете, и примеры, которые я вижу, — это люди, использующие библиотеки. Я знаю, что использовать библиотеку было бы намного проще, но для ее изучения потребуется время. Есть ли способ сделать это с помощью чистого родного 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

заранее благодарю вас за вашу помощь.

Итак, после попытки объединить ваш код и мой вместе, вот что я придумал.

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

спасибо за вашу помощь.