HTML canvas setTransform() Methode
Definition und Verwendung
Jedes Objekt auf der Leinwand hat eine aktuelle Transformationsmatrix.
setTransform() Diese Methode setzt die aktuelle Transformationsmatrix auf die Einheitsmatrix zurück und führt sie mit denselben Parametern aus transform().
Mit anderen Worten, setTransform() ermöglicht es Ihnen, das aktuelle Umfeld zu skalieren, zu drehen, zu verschieben und zu neigen.
Anmerkung:Diese Transformation beeinflusst nur die Zeichnungen, die nach dem Aufruf von setTransform() erfolgen.
Beispiel
Zeichnen Sie ein Rechteck, indem Sie setTransform() aufrufen, um die Transformation zurückzusetzen und eine neue Transformationsmatrix zu erstellen, zeichnen Sie dann das Rechteck erneut, setzen Sie die Transformation zurück und erstellen Sie eine neue Matrix, zeichnen Sie dann das Rechteck erneut. Beachten Sie, dass der rote Rechteck in diesem Beispiel nicht sichtbar ist, da es unter dem blauen Rechteck liegt: Jedes Mal, wenn Sie setTransform() aufrufen, wird die vorherige Transformationsmatrix zurückgesetzt und eine neue Matrix erstellt, daher wird im folgenden Beispiel das rote Rechteck nicht angezeigt, da es unter dem blauen Rechteck liegt:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
Syntax
context.setTransform(a,b,c,d,e,f);
Parameterwert
| Parameter | Beschreibung |
|---|---|
| a | Horizontale Drehzeichnung. |
| b | Horizontale Neigungzeichnung. |
| c | Vertikale Neigungzeichnung. |
| d | Vertikale Skalierungszeichnung. |
| e | Horizontale Bewegungszeichnung. |
| f | Vertikale Bewegungszeichnung. |
Browser-Unterstützung
Die in der Tabelle angegebenen Zahlen beziehen sich auf die erste Browser-Version, 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.
