CanvasRenderingContext2D.rotate() — Methode · JavaScript-Referenz

Signatur

CanvasRenderingContext2D.prototype.rotate(angle)

Beschreibung

Mit rotate() drehen Sie das Koordinatensystem des Canvas-Kontexts um den aktuellen Ursprung. Anfangs liegt dieser Ursprung oben links bei (0, 0). Die Methode verändert keine Pixel, die schon gezeichnet sind. Sie betrifft nur alle Zeichenoperationen, die danach folgen, zum Beispiel fillRect(), drawImage() oder fillText().

Der Winkel wird im Bogenmaß (Radiant) angegeben. Weil die y-Achse im Canvas nach unten zeigt, dreht ein positiver Wert im Uhrzeigersinn. Einen Wert in Grad rechnen Sie mit grad * Math.PI / 180 um.

Wollen Sie ein Objekt um seinen eigenen Mittelpunkt drehen, gehen Sie in drei Schritten vor:

Mit translate() den Ursprung in den Mittelpunkt verschieben.
Mit rotate() drehen.
Das Objekt versetzt zum Ursprung zeichnen, also bei -breite / 2 und -höhe / 2.

Mit save() vorher und restore() danach bleibt die Drehung auf diesen einen Zeichenvorgang begrenzt.

Mehrere Aufrufe von rotate() addieren sich, weil jede Drehung mit der bestehenden Matrix multipliziert wird. Das gilt auch zusammen mit translate(), scale() und transform(). Die Reihenfolge der Aufrufe spielt dabei eine Rolle.

Parameter

Name	Typ	Default	Beschreibung
$angle Pflicht	number		Drehwinkel im Bogenmaß (Radiant), im Uhrzeigersinn. Umrechnung aus Grad: `grad * Math.PI / 180`.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Nur die Transformationsmatrix des Kontexts wird verändert.

Beispiele

Einfache Drehung um den Ursprung

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// Referenz ohne Drehung
ctx.fillStyle = 'gray';
ctx.fillRect(100, 0, 80, 20);

// 45° im Uhrzeigersinn um (0, 0) drehen
ctx.rotate((45 * Math.PI) / 180);
ctx.fillStyle = 'crimson';
ctx.fillRect(100, 0, 80, 20);

// Matrix wieder zurücksetzen
ctx.setTransform(1, 0, 0, 1, 0, 0);

Rechteck um den eigenen Mittelpunkt drehen

const ctx = document.querySelector('canvas').getContext('2d');

const drawRotatedRect = (x, y, w, h, deg, color) => {
  ctx.save();
  ctx.translate(x + w / 2, y + h / 2); // Ursprung in den Mittelpunkt
  ctx.rotate((deg * Math.PI) / 180);
  ctx.fillStyle = color;
  ctx.fillRect(-w / 2, -h / 2, w, h); // um den Ursprung herum zeichnen
  ctx.restore(); // Transformation verwerfen
};

drawRotatedRect(50, 50, 100, 60, 30, 'steelblue');
drawRotatedRect(200, 50, 100, 60, -15, 'orange');

Animierter Zeiger mit requestAnimationFrame

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const cx = canvas.width / 2;
const cy = canvas.height / 2;

const tick = (time) => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.translate(cx, cy);
  ctx.rotate((time / 1000) * Math.PI); // eine halbe Umdrehung pro Sekunde
  ctx.fillStyle = '#333';
  ctx.fillRect(-2, -80, 4, 80); // Zeiger zeigt vom Mittelpunkt nach oben
  ctx.restore();
  requestAnimationFrame(tick);
};

requestAnimationFrame(tick);

Gedrehte Achsenbeschriftung

const ctx = document.querySelector('canvas').getContext('2d');
const labels = ['Januar', 'Februar', 'März', 'April'];

ctx.font = '14px sans-serif';
labels.forEach((label, i) => {
  ctx.save();
  ctx.translate(40 + i * 70, 150);
  ctx.rotate(-Math.PI / 4); // -45°, Text steigt nach rechts an
  ctx.fillText(label, 0, 0);
  ctx.restore();
});

// Wichtig · Fallstricke

Bogenmaß statt Grad: ctx.rotate(90) dreht um 90 Radiant (etwa 5157°), nicht um 90°. Rechnen Sie Grad immer zuerst um.
Drehung um den Ursprung: Ohne vorheriges translate() dreht sich alles um die linke obere Ecke. Objekte wandern dann scheinbar aus dem sichtbaren Bereich.
Drehungen addieren sich: Wiederholte Aufrufe, etwa in einer Animationsschleife, summieren sich auf. Verwenden Sie save()/restore() oder setzen Sie die Matrix mit setTransform(1, 0, 0, 1, 0, 0) bzw. resetTransform() zurück.
Nicht endliche Werte: Bei NaN oder Infinity wird der Aufruf still ignoriert. Es wird kein Fehler geworfen.
Schon gezeichneter Inhalt bleibt, wie er ist: Um ein fertiges Bild zu drehen, zeichnen Sie es mit drawImage() nach der Drehung neu.
Performance: Bei vielen gedrehten Objekten ist setTransform() mit einer fertig berechneten Matrix oft günstiger als viele Aufrufe von save()/restore().
Kompatibilität: Wird von allen modernen Browsern unterstützt, ebenso von OffscreenCanvasRenderingContext2D in Web Workern.

Siehe auch

CanvasRenderingContext2D.translate() CanvasRenderingContext2D.scale() CanvasRenderingContext2D.transform() CanvasRenderingContext2D.setTransform() CanvasRenderingContext2D.resetTransform() CanvasRenderingContext2D.save() CanvasRenderingContext2D.restore() CanvasRenderingContext2D