Transformationen - translate()
Mit der Methode translate kann der Ursprung der Zeichenfläche (canvas) verschoben werden.
translate
void translate(x, y)
Die Methode erwartet zwei Parameter, deren Werte die Anzahl Einheiten repräsentieren, um die der Ursprung verschoben werden soll.
Parameter
x - Anzahl der horizontalen Einheiten
y - Anzahl der vertikalen Einheiten
Schematische Darstellung
Die folgende Skizze veranschaulicht die Wirkung der übergebenen Parameter.
Beispiel
function drawIt(){
var objCanvas = document.getElementById("canvas_id");
// Falls das Objekt unterstützt wird
if(objCanvas.getContext){
// Kontext
var objContext = objCanvas.getContext('2d');
objContext.translate(110, 110); // Ausgangsverschiebung
var intRed = 255; // Startwert Rotabstufungen
var intRedInv = 55; // Startwert inverse Rotabstufungen
for(var i=0; i<10; i++){
objContext.translate(-10, -10);
objContext.fillStyle = "rgba("+(intRed - i*20)+", 0, 0, 0.5)";
objContext.strokeStyle = "rgb("+(intRedInv + i*20)+", 0, 0)";
objContext.fillRect(0, 0, 80, 80);
objContext.strokeRect(0, 0, 80, 80);
}
}else{
// Sonstiger Code
}
}
Erläuterung
Zu Beginn wird eine Ausgangsverschiebung von 110 Pixeln (= eingestellte Einheit) sowohl in x- als auch in y-Richtung vorgenommen. Ausgehend von dieser Translation wird in ener for-Schleife wiederholt um 10 Pixel in negative Richtungen verschoben. An jeder neuen Position wird ein halbtransparentes Quadrat mit Kontur gezeichnet.
Auf das Sichern und Zurücksetzen des Ausgangszustands mit Hilfe der Methoden save und restore wurde aufgrund der besseren Übersichtlichkeit verzichtet.