Transformationen - scale()
Die Methode scale dient zum Skalieren (Vergrössern/Verkleinern). Dabei werden
die Einheiten des Gitternetzes vergrössert oder verkleinert.
Negative Argumente bewirken Verkleinerung, positive Vergrösserung.
scale
void scale(scaleX, scaleY)
Die Methode erwartet zwei Parameter. Ist mindestens ein Argument unendlich, muss die Transformationsmatrix ebenfalls als unendlich markiert werden.
Parameter
scaleX - repräsentiert den horizontalen Skalierungsfaktor
scaleY - repräsentiert den vertikalen Skalierungsfaktor
Schematische Darstellung
Die folgende Skizze veranschaulicht die unterschiedlichen Möglichkeiten der Skalierung (ohne unendliche Transformation).
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.save();
objContext.strokeStyle = "#f00";
objContext.strokeRect(10, 10, 80, 80);
objContext.scale(2, 2);
objContext.strokeStyle = "#0f0";
objContext.strokeRect(10, 10, 80, 80);
objContext.restore();
objContext.scale(0.5, 0.75);
objContext.strokeStyle = "#369";
objContext.strokeRect(10, 10, 80, 80);
objContext.restore();
}else{
// Sonstiger Code
}
}
Erläuterung
Es werden drei Quadrate in unterschiedlichen Skalierungsstufen gezeichnet. Zunächst wird ein rotes Quadrat ohne Skalierung gezeichnet. Das grüne Quadrat wurde um den Faktor zwei sowohl in x- als auch in y-Richtung vergrössert. Wie zu sehen ist, wirkt sich die Skalierung auch auf die Startkoordinaten der Rechtecks-Form aus - (10, 10) --> (20, 20). Nachdem der Ausgangszustand der Zeichenfläche wiederhergestellt wurde (restore), wird ein verkleinertes Quadrat (blau) gezeichnet. Die Skalierungsfaktoren unterscheiden sich hier in x- und y-Richtung. Horizontal wird das Gitter auf 50 Prozent gestaucht, vertikal auf 75.