Beispiel
Zeichnen Sie ein Rechteck, zurückgesetzt und eine neue Transformationsmatrix mit erstellen setTransform() , das Rechteck zu zeichnen wieder zurückgesetzt und eine neue Transformationsmatrix, dann das Rechteck zeichnen wieder. Beachten Sie, dass jedes Mal , wenn Sie anrufen setTransform() , ist es die vorherige Transformationsmatrix setzt und baut dann die neue Matrix, so im Beispiel unten, das rote Rechteck nicht angezeigt wird, weil es unter dem blauen Rechteck ist:
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);
Versuch es selber " Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Methode in vollem Umfang unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| setTransform() | ja | 9.0 | ja | ja | ja |
Definition und Verwendung
Jedes Objekt auf der Leinwand hat eine aktuelle Transformationsmatrix.
Die setTransform() Methode setzt der Strom an die Identitätsmatrix zu transformieren und dann läuft transform() mit den gleichen Argumenten.
Mit anderen Worten, die setTransform() lässt Methode , die Sie skalieren, drehen, verschieben und verdrehen den aktuellen Kontext.
Hinweis: Die Transformation nur aus Zeichnungen beeinflussen wird , nachdem die setTransform Methode aufgerufen wird.
| JavaScript-Syntax: | context.setTransform( a,b,c,d,e,f ); |
|---|
Parameterwerte
| Parameter | Beschreibung | Spiel es |
|---|---|---|
| a | Waagen, die Zeichnungen horizontal | Spiel es " |
| b | Neigt die Zeichnungen horizontal | Spiel es " |
| c | Neigt die Zeichnungen vertikal | Spiel es " |
| d | Waagen, die Zeichnungen vertikal | Spiel es " |
| e | Verschiebt die die horizontal Zeichnungen | Spiel es " |
| f | Verschiebt die die Zeichnungen vertikal | Spiel es " |