Drehen eines Quadrats in Richtung eines bestimmten Punktes

Question

Ich versuche, die shooter0 in Richtung des Charakters zu drehen (die sich ständig bewegen wird). Ich versuchte, den atan() zu verwenden und diesen dann in einen Winkel umzuwandeln, aber der shooter0 wird nicht drehen.

var shooter0 = document.getElementById('shooter0'); 
var character = document.getElementById('character'); 
var tracker0 = shooter0.getContext('2d'); 
// The cordinates for the character and shooter0 
var characterLeft = 530; 
var characterTop = 180; 
var shooter0Left = 960; 
var shooter0Top = 470; 

while (characterLeft >= 700){ 
    setInterval(startShooter, 1000); 
} 


function startShooter(){ 
    //Getting all the variable to be able to calculate the angle of the hypotenuse 
    var dX = characterLeft - tracker0Left; 
    var dY = characterTop - tracker0Top; 
    var arcTan = Math.atan(dX/dY)* 180/Math.PI; 

    var cx = shooter0.width/2; 
    var cy = shooter0.height/2; 


    tracker0.save(); 
    tracker0.translate(cx, cy); // pivot point 
    //rotating the square towards the character 
    tracker0.rotate(arcTan * Math.PI/180); 
    //Drawing the square 
    tracker0.fillRect(400, 300, 100, 100); 
    tracker0.restore(); 
} 

HTML:

<canvas id="character" height="50px;" width="50px;"></canvas> 
<canvas id="shooter0" height="100px;" width="100px;"></canvas> 

und CSS:

#character{ 
    position: absolute; 
    top: 180px; 
    left: 530px; 
    border: 3px solid black; 
    background-color: orange; 
} 
#shooter0{ 
    position: absolute; 
    left: 960px; 
    top: 470px; 
    border: 2px solid black; 
    background-color: #B40404; 
} 

Sorry, wenn Sie den Code eher chaotisch finden. Hier ist eine Geige mit all meinem Code, wenn Sie das nützlich finden. https://jsfiddle.net/Snubben/tc0j4psz/3/ Bitte verwenden Sie keine JQuery.

Answer 1

Ich konnte deine Geige aus irgendeinem Grund nicht zur Arbeit bringen, also habe ich ein kleines Beispiel erstellt.

Das, was ich im Code bemerken:

var arcTan = Math.atan(dX/dY)* 180/Math.PI;: Math.atan einen Winkel in Radiant zurück. Und Sie sie in Grad konvertieren von 180/Math.PI

Nur es zu konvertieren zurück in Radiant hier wieder: tracker0.rotate(arcTan * Math.PI/180);

Dann wird für Winkel Berechnung (in Radiant), ich denke, Math.atan2 ist die einfach zu bedienen: Math.atan2 - MDN

Die Verwendung von Math.atan2 einen Winkel zwischen zwei Punkten zu berechnen ist: Math.atan2(point2.y - point1.y, point2.x - point1.x)

Mit diesen Informationen ich glaube, Sie sehr weit kommen können.

demo fiddle