CanvasRenderingContext2D: Methode rotate()

Syntax

rotate(angle)

Parameter

angle

Der Drehwinkel im Uhrzeigersinn, angegeben im Bogenmaß. Mit degree * Math.PI / 180 können Sie einen Winkel von Grad in Bogenmaß umrechnen.

Der Drehpunkt ist immer der Ursprung des Canvas. Um den Drehpunkt zu ändern, müssen Sie den Canvas mit der Methode translate() verschieben.

Rückgabewert

Keiner (undefined).

Beispiele

Eine Form drehen

Dieses Beispiel dreht ein Rechteck um 45°. Beachten Sie, dass der Drehpunkt die obere linke Ecke des Canvas ist und keine Position relativ zu einer Form.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Point of transform origin
ctx.arc(0, 0, 5, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();

// Non-rotated rectangle
ctx.fillStyle = "gray";
ctx.fillRect(100, 0, 80, 20);

// Rotated rectangle
ctx.rotate((45 * Math.PI) / 180);
ctx.fillStyle = "red";
ctx.fillRect(100, 0, 80, 20);

// Reset transformation matrix to the identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);

Ergebnis

Der Drehpunkt ist blau. Das nicht gedrehte Rechteck ist grau und das gedrehte Rechteck rot.

Eine Form um ihren Mittelpunkt drehen

Dieses Beispiel dreht eine Form um ihren Mittelpunkt. Dazu werden die folgenden Schritte auf die Matrix angewendet:

1. Zuerst verschiebt translate() den Ursprung der Matrix zum Mittelpunkt der Form.
2. rotate() dreht die Matrix um den gewünschten Winkel.
3. Schließlich verschiebt translate() den Ursprung der Matrix zurück an seinen Ausgangspunkt. Dazu werden die Koordinatenwerte des Mittelpunkts der Form mit negativem Vorzeichen verwendet.

HTML

<canvas id="canvas"></canvas>

JavaScript

Die Form ist ein Rechteck mit einer Ecke bei (80, 60), einer Breite von 140 und einer Höhe von 30. Sein horizontaler Mittelpunkt liegt bei (80 + 140 / 2), also 150. Sein vertikaler Mittelpunkt liegt bei (60 + 30 / 2), also 75. Der Mittelpunkt liegt somit bei (150, 75).

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Non-rotated rectangle
ctx.fillStyle = "gray";
ctx.fillRect(80, 60, 140, 30);

// Matrix transformation
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);

// Rotated rectangle
ctx.fillStyle = "red";
ctx.fillRect(80, 60, 140, 30);

Ergebnis

Das nicht gedrehte Rechteck ist grau und das gedrehte Rechteck rot.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das Interface, das diese Methode definiert: CanvasRenderingContext2D