HTML-Canvas scale()-Methode
Beispiel
Zeichnen Sie ein Rechteck, skalieren Sie es auf 200% und zeichnen Sie das Rechteck dann erneut:
JavaScript：
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Selbst ausprobieren »
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen die scale()-Methode.
Hinweis:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.
Definition und Verwendung
Die scale()-Methode skaliert die aktuelle Zeichnung auf eine größere oder kleinere Größe.
Hinweis:Wenn Sie eine Zeichnung skalieren, werden alle nachfolgenden Zeichnungen ebenfalls skaliert. Auch die Positionierung wird skaliert. Wenn Sie scale(2,2) verwenden, wird die Zeichnung doppelt so weit von der oberen linken Ecke der Zeichenfläche entfernt positioniert.
| JavaScript-Syntax: | context.scale(scalewidth,scaleheight); |
|---|
Parameterwerte
| Parameter | Beschreibung |
|---|---|
| scalewidth | Skaliert die Breite der aktuellen Zeichnung (1=100%, 0.5=50%, 2=200%, und so weiter). |
| scaleheight | Skaliert die Höhe der aktuellen Zeichnung (1=100%, 0.5=50%, 2=200%, und so weiter). |
Weitere Beispiele
Beispiel
Zeichnen Sie ein Rechteck; skalieren Sie auf 200%, zeichnen Sie das Rechteck erneut; skalieren Sie auf 200%, zeichnen Sie das Rechteck erneut; skalieren Sie auf 200%, zeichnen Sie das Rechteck erneut:
JavaScript：
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Selbst ausprobieren »
HTML-Canvas-Referenzhandbuch Weitere Erweiterungen