HTML canvas scale() Methode
Definition und Verwendung
scale() Methode zur Skalierung der aktuellen Zeichnung, größer oder kleiner.
Anmerkung:Wenn Sie die Zeichnung skalieren, wird auch alle nachfolgenden Zeichnungen skaliert. Die Position wird ebenfalls skaliert. Wenn Sie scale(2,2)dann wird die Zeichnung an einer Position positioniert, die doppelt so weit von der linken oberen Ecke des Bildschirms entfernt ist.
Beispiel
Beispiel 1
Zeichnen Sie ein Rechteck, vergrößern Sie es auf 200% und zeichnen Sie dann erneut ein 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 | Skalieren Sie die Breite der aktuellen Zeichnung (1=100%, 0.5=50%, 2=200%, usw.). |
| scaleheight | Skalieren Sie die Höhe der aktuellen Zeichnung (1=100%, 0.5=50%, 2=200%, etc.). |
Mehr Beispiele
Beispiel 2
Zeichnen Sie ein Rechteck; Vergrößern Sie um 200%, zeichnen Sie erneut ein Rechteck; Vergrößern Sie um 200%, zeichnen Sie dann erneut ein Rechteck; Vergrößern Sie um 200%, zeichnen Sie erneut ein 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 Versionsnummer des ersten Browsers an, der 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 den <canvas>-Element nicht.
