Math.atan2() — Methode · JavaScript-Referenz

Signatur

Math.atan2(y, x)

Beschreibung

Math.atan2(y, x) berechnet den Winkel des Punktes (x, y) gegen den Uhrzeigersinn, gemessen von der positiven x-Achse aus. Der Rückgabewert liegt im Intervall [-π, π]. Weil die Methode die Vorzeichen beider Koordinaten auswertet, erkennt sie den Quadranten zuverlässig – im Gegensatz zu Math.atan(y / x), das nur Werte zwischen −π/2 und π/2 liefert und bei x = 0 eine Division durch null erfordert.

Typische Einsatzgebiete sind Spiele, Canvas-Grafik und Animationen: etwa um ein Objekt in Richtung Mauszeiger zu drehen, die Richtung eines Bewegungsvektors zu bestimmen oder kartesische Koordinaten in Polarkoordinaten umzurechnen (zusammen mit Math.hypot() für den Radius).

Achtung bei der Reihenfolge: Der erste Parameter ist y, der zweite x. Das entspricht der mathematischen Konvention atan2(y, x), wird in der Praxis aber sehr oft verwechselt. Da atan2 eine statische Methode von Math ist, ruft man sie immer als Math.atan2() auf.

Parameter

Name	Typ	Default	Beschreibung
$y Pflicht	number		Die y-Koordinate des Punktes. Nicht-numerische Werte werden in eine Zahl umgewandelt.
$x Pflicht	number		Die x-Koordinate des Punktes. Nicht-numerische Werte werden in eine Zahl umgewandelt.

Rückgabewert

Typ

number

Beschreibung

Der Winkel in Radiant zwischen -π und π (einschließlich). Ist eines der Argumente NaN (bzw. nicht in eine Zahl umwandelbar), ist das Ergebnis NaN.

Beispiele

Grundlegende Werte und Quadranten

console.log(Math.atan2(1, 1));   // 1. Quadrant
console.log(Math.atan2(1, -1));  // 2. Quadrant
console.log(Math.atan2(-1, -1)); // 3. Quadrant
console.log(Math.atan2(0, -1));  // negative x-Achse

// Vergleich: Math.atan verliert die Quadranten-Information
console.log(Math.atan(-1 / -1));

0.7853981633974483 2.356194490192345 -2.356194490192345 3.141592653589793 0.7853981633974483

Element in Richtung Mauszeiger drehen

const arrow = document.querySelector('#arrow');

document.addEventListener('mousemove', (event) => {
  const rect = arrow.getBoundingClientRect();
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;

  // Reihenfolge beachten: erst dy, dann dx
  const angle = Math.atan2(event.clientY - centerY, event.clientX - centerX);
  arrow.style.transform = `rotate(${angle}rad)`;
});

Kartesisch in Polarkoordinaten mit Grad von 0–360

const toPolar = (x, y) => {
  const radius = Math.hypot(x, y);
  let degrees = Math.atan2(y, x) * 180 / Math.PI;
  if (degrees < 0) degrees += 360; // auf 0–360° normieren
  return { radius, degrees };
};

console.log(toPolar(3, 4));
console.log(toPolar(0, -2));

{ radius: 5, degrees: 53.13010235415598 } { radius: 2, degrees: 270 }

// Wichtig · Fallstricke

Parameter-Reihenfolge: Math.atan2(y, x) – nicht (x, y). Vertauschte Argumente ergeben einen an der Winkelhalbierenden gespiegelten Winkel und sind ein häufiger Fehler.
Bildschirmkoordinaten: Im Canvas und im DOM zeigt die y-Achse nach unten. Positive Winkel drehen dort also im Uhrzeigersinn. Das passt zu CSS rotate() und ctx.rotate(), nicht aber zur mathematischen Darstellung.
Radiant statt Grad: Für Grad mit 180 / Math.PI multiplizieren. Negative Ergebnisse bei Bedarf mit + 360 bzw. + 2 * Math.PI normieren.
Vorzeichenbehaftete Null: Math.atan2(0, -0) ergibt π, Math.atan2(-0, -0) ergibt -π, Math.atan2(0, 0) ergibt 0. Das kann zu unerwarteten Sprüngen an der negativen x-Achse führen.
Unendliche Werte sind definiert, z. B. Math.atan2(Infinity, Infinity) ergibt π/4.
Die Methode wird von allen Browsern und von Node.js unterstützt.

Siehe auch

Math.atan() Math.tan() Math.hypot() Math.sin() Math.cos() Math.PI