Transformationen werden auf die Koordinaten von Formen und Pfaden bei deren Erstellung angewandt. Transformationsangaben werden in der Transformationsmatrix gespeichert.
Bei der Initialisierung muss die Transformationsmatrix die identische Transformations sein, dh. keine Skalierung, keine Drehung und keine Verschiebung.
Werden Transformationen durchgeführt, wird empfohlen vorher mit der Methode save den aktuellen Zustand auf dem Zeichenstack zu sichern. Nachdem die gewünschten Aktionen ausgeführt wurden, kann mit restore der Ausgangszustand wiederhergestellt werden. So kann das aufwändige "Rückwärtswiederherstellen" umgangen werden.
Soll ein Pfad einer Transformation unterzogen werden, so muss dies vor seiner Konstruktion erfolgen. Im Klartext heisst das, erst die Transformationsregeln festlegen, dann die Pfadkonstruktion durchführen.
scale
- (Methode) Skaliert den Inhalt des Kontextesrotate
- (Methode) Drehung des Inhaltstranslate
- (Methode) Verschieben des Inhaltstransform
- (Methode) multipliziert die aktuelle Transformationsmatrix (mit Parameterwerte)setTransform
- (Methode) setzt die aktuelle Transformationsmatrix (auf Parameterwerte)function drawIt(){ var objCanvas = document.getElementById("canvas_id"); // Falls das Objekt unterstützt wird if(objCanvas.getContext){ // Kontext var objContext = objCanvas.getContext('2d'); objContext.save(); objContext.fillStyle = "#00f"; objContext.translate(80, 80); var intRed = 255; for(var i=1; i<=16; i++){ objContext.rotate((1/8)*Math.PI); objContext.fillStyle = "rgb("+(intRed - i*10)+", 0, 0)"; objContext.fillRect(0, 0, 40, 40); } objContext.restore(); objContext.strokeStyle = "#fff"; objContext.strokeRect(50, 50, 60, 60); }else{ // Sonstiger Code } }
Zu Beginn wird der aktuelle Zustand mit Hilfe der Methode save auf dem Stack gesichert. Als nächstes wird der Ursprung des Zeichenbereichs um 80 Pixel in x- und y-Richtung verschoben (Translation). In einer for-Schleife wird der Zeichenbereich in 8 Schritten einmal um 2*PI (=360° oder eine komplette Umdrehung) um den Ursprung gedreht. In jedem Teilschritt wird ein Quadrat in einer Rotabstufung gezeichnet.
Zum Schluss wird der Ausgangszustand mit restore wiederhergestellt und eine Rechteckkontur gezeichnet.