HTML-Canvas- transform()- Methode
Beispiel
Zeichnen Sie ein Rechteck, fügen Sie eine neue Transformationsmatrix mit transform() hinzu, zeichnen Sie das Rechteck erneut, fügen Sie eine neue Transformationsmatrix hinzu und zeichnen Sie das Rechteck erneut. Beachten Sie, dass jedes Mal, wenn Sie transform() aufrufen, es auf der vorherigen Transformationsmatrix aufbaut:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100)
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);
ctx.transform(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 | |||||
|---|---|---|---|---|---|
| transform() | Yes | 9.0 | Yes | Yes | Yes |
Definition und Verwendung
Jedes Objekt auf der Leinwand hat eine aktuelle Transformationsmatrix.
Die Methode transform() ersetzt die aktuelle Transformationsmatrix. Es multipliziert die aktuelle Transformationsmatrix mit der Matrix, die beschrieben wird durch:
| ein | C | e |
| B | D | F |
| 0 | 0 | 1 |
Mit anderen Worten, mit der Methode transform() 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 Methode transform() erstellt wurden.
Hinweis: Die transform()-Methode verhält sich relativ zu anderen Transformationen, die durch rotation(), scale(), translate() oder transform() durchgeführt werden. Beispiel: Wenn Sie Ihre Zeichnung bereits auf zwei skaliert haben und die transform()-Methode Ihre Zeichnungen um zwei skaliert, werden Ihre Zeichnungen jetzt um vier skaliert.
Tipp: Sehen Sie sich die Methode setTransform() an, die sich nicht relativ zu anderen Transformationen verhält.
| JavaScript-Syntax: | Kontext .transform( a,b,c,d,e,f ); |
|---|
Parameterwerte
| Parameter | Description | Play it |
|---|---|---|
| a | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
❮ HTML-Canvas-Referenz