Canvas scale() Methode
Definition und Verwendung
scale() Methode, um die aktuelle Zeichnung zu skalieren, größer oder kleiner.
Anmerkung:Wenn Sie das Zeichnen skalieren, wird auch alles nachfolgende Zeichnen skaliert. Die Positionierung wird ebenfalls skaliert. Wenn Sie scale(2,2)Dann wird die Zeichnung an einem Ort positioniert, der doppelt so weit von der linken oberen Ecke des Canvas entfernt ist.
Beispiel
Beispiel 1
Zeichnen Sie ein Rechteck, vergrößern Sie um 200%, zeichnen Sie dann ein weiteres Rechteck:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Hinweis:Mehr Beispiele finden Sie am Seitenende.
Syntax
context.scale(scalewidth,scaleheight);
Parameterwert
| Parameter | Beschreibung |
|---|---|
| scalewidth | Zoomen Sie die aktuelle Zeichenzahl (1=100%, 0.5=50%, 2=200%, usw.). |
| scaleheight | Zoomen Sie die aktuelle Zeichenhöhe (1=100%, 0.5=50%, 2=200%, usw.). |
Mehr Beispiele
Beispiel 2
Zeichnen Sie ein Rechteck; Vergrößern Sie um 200%, zeichnen Sie dann ein Rechteck; Vergrößern Sie um 200%, zeichnen Sie dann ein weiteres Rechteck; Vergrößern Sie um 200%, zeichnen Sie dann ein weiteres Rechteck:
JavaScript:
var c=document.getElementById("myCanvas");
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);
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Version des Browsers an, die diese Eigenschaft vollständig unterstützt.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.
