Den Inhalt der Canvas-Zeichenfläche skalieren, drehen oder in anderer Art und Weise transformieren

Der Inhalt der Canvas-Zeichenfläche lässt sich in bestimmter Art und Weise verändern, ohne das neue Grafikobjekt gezeichnet werden, und zwar durch

  • rotieren, also das Drehen. Dies erfolgt mit rotate(winkel)
  • skalieren, d.h. die Veränderung der Größe. Dies erfolgt mit scale(xFaktor, yFaktor)

Weitere Transformationsmethoden sind:

  • transform(m11, m12, m21, m22, dx, dy), damit
  • setTransform(m11, m12, m21, m22, dx, dy), damit
  • translate(x, y), damit

Einige Beispiele sollen diese Methoden verdeutlichen und demonstrieren.

Drehen mit Rotate

Zunächst ein Beispiel zum Drehen. Das Drehen erfolgt mit der Methode rotate(Winkelangabe). Dabei ist zu beachten, dass die Angabe des Drehwinkels in Rad erfolgt, d.h. der Wert für eine Drehung um 360 Grad ist 2*Pi Rad.

Gezeichnet werden rotes, ein gelbes und ein grünes Rechteck, das rote ist um 0 Grad, das gelbe um 45 Grad und das grüne um 90 Grad gedreht. Dabei werden allerdings nicht direkt die Objekte gedreht, sondern gewissermaßen das Koordinatensystem der Zeichnungsfläche. Dadurch werden die Rechtecke nicht übereinander gezeichnet, sondern versetzt. Zu beachten ist auch, dass die rotate-Methode kumulierend wirkt. Der Code für das erste Beispiel sieht so aus:

//Initialisierung
var cx = document.getElementById('canvas').getContext('2d');
//Alles Löschen
clean(cx);
// Zustand speichern
cx.save();
// um 0 Grad Drehen
cx.rotate((0*Math.PI/8));
// Farbe Rot
cx.fillStyle = "rgb(255, 0, 0)";
//Zeichnen
cx.fillRect(100, 10, 50, 50);
// um 45 Grad Drehen
cx.rotate((1*Math.PI/8));
// Farbe Gelb
cx.fillStyle = "rgb(255, 255, 0)";
//Zeichnen
cx.fillRect(100, 10, 50, 50);
// nochmal um 45 Grad Drehen
cx.rotate((1*Math.PI/8));
// Farbe Grün
cx.fillStyle = "rgb(0, 255, 0)";
//Zeichnen
cx.fillRect(100, 10, 50, 50);
// Zustand wieder herstellen
cx.restore();

Beispiel 1 ansehen

Größenänderung mit Scale

Mit scale(FaktorX, FaktorY) wird die Größe geändert. Dabei sind Faktorwert >0 zum Vergrößern und Werte <0 zum Verkleinern erlaubt. Diese können auch gemischt werden. Ebenso wie bei rotate ist zu beachten, dass sich scale nicht direkt auf das Objekt sondern auf das Koordinatensystem der Canvas-Zeichung auswirkt und dass die Skalierungswerte kumuliert wirken.

Wie im verherigen Beispiel werden wiederum drei Rechtecke gezeichnet, das erste rote ohne Skalierung, das zweite gelbe mit einer Skalierung um den Faktor 1,5 in beiden Dimensionen und das dritte grüne mit einer Skalierung von 1,5 für die Breite und 1/1,5 für die Höhe. Dadurch ist dieses Rechtecke 2,25 Mal breiter ( aus der Multiplikation der Faktoren1,5*1,5=2,25) als das erste und genauso hoch (1,5*1/1,5=1). Der Code für das zweite Beispiel sieht so aus:

//Initialisierung
var cx = document.getElementById('canvas').getContext('2d');
//Alles Löschen
clean(cx);
// Zustand speichern
cx.save();
// keine Skalierung
cx.scale(1,1);
// Farbe Rot
cx.fillStyle = "rgba(255, 0, 0, 1)";
//Zeichnen
cx.fillRect(10, 10, 50, 50);
// um Faktor 1.5, also 50% größer
cx.scale(1.5,1.5);
// Farbe Gelb
cx.fillStyle = "rgba(255, 255, 0, 0.75)";
//Zeichnen
cx.fillRect(10, 10, 50, 50);
// Breite noch einmal um Faktor 1.5, also 50% größer
// Höhe durch faktor 1/1.5 auf Normalzustand
cx.scale(1.5,1/1.5);
// Farbe Grün
cx.fillStyle = "rgba(0, 255, 0, 0.5)";
//Zeichnen
cx.fillRect(10, 10, 50, 50);
// Zustand wieder herstellen
cx.restore();

Beispiel 2 ansehen

Verschieben mit Translate

Die Methode translate(RichtungX, RichtungY) führt eine einfache Verschiebung des Koordinatensystem der Canvas-Fläche durch.wird die Größe geändert. Dabei sind Faktorwert >0 zum Vergrößern und Werte <0 zum Verkleinern erlaubt. Diese können auch gemischt werden. Ebenso wie bei rotate ist zu beachten, dass sich scale nicht direkt auf das Objekt sondern auf das Koordinatensystem der Canvas-Zeichung auswirkt und dass die Skalierungswerte kumuliert wirken.