HTML-Leinwand setTransform () Methode
Beispiel
Zeichnen Sie ein Rechteck, setzen Sie es zurück und erstellen Sie eine neue Transformationsmatrix mit setTransform(), zeichnen Sie das Rechteck erneut, setzen Sie es zurück und erstellen Sie eine neue Transformationsmatrix, und zeichnen Sie das Rechteck erneut. Beachten Sie, dass jedes Mal, wenn Sie setTransform() aufrufen, die vorherige Transformationsmatrix zurückgesetzt und dann die neue Matrix erstellt wird, sodass im folgenden Beispiel das rote Rechteck nicht angezeigt wird, da es sich unter dem blauen Rechteck befindet:
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);
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Verfahren vollständig unterstützt.
| Method | |||||
|---|---|---|---|---|---|
| setTransform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definition und Verwendung
Jedes Objekt auf der Leinwand hat eine aktuelle Transformationsmatrix.
Die Methode setTransform() setzt die aktuelle Transformation auf die Identitätsmatrix zurück und führt dann transform() mit denselben Argumenten aus.
Mit anderen Worten, mit der Methode setTransform() können Sie den aktuellen Kontext skalieren, drehen, verschieben und neigen.
Hinweis: Die Transformation wirkt sich nur auf Zeichnungen aus, die nach dem Aufruf der setTransform-Methode erstellt wurden.
| JavaScript-Syntax: | Kontext .setTransform( a, b, c, d, e, f ); |
|---|
Parameterwerte
| Parameter | Description | Play it |
|---|---|---|
| a | Scales the drawings horizontally | |
| b | Skews the drawings horizontally | |
| c | Skews the drawings vertically | |
| d | Scales the drawings vertically | |
| e | Moves the the drawings horizontally | |
| f | Moves the the drawings vertically |
❮ Canvas-Objekt