HTML canvas transform() Methode

HTML5 Canvas Referenzhandbuch

Definition und Verwendung

Jedes Objekt auf dem Canvas hat eine aktuelle Transformationsmatrix.

transform() Methoden ersetzen die aktuelle Transformationsmatrix. Sie operieren mit der folgenden Matrix, wie beschrieben:

a  c  e
b  d  f
0  0  1

Mit anderen Worten, transform() 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 transform() folgen.

Anmerkung:Das Verhalten der transform()-Methode ist relativ zu rotate()、scale()、translate() oder andere Transformationen durch transform() durchgeführte Transformationen. Zum Beispiel: Wenn Sie das Zeichnen bereits auf das Zweifache skaliert haben, verdoppelt die transform()-Methode das Zeichnen noch einmal, sodass Ihr Zeichnen letztlich vierfach vergrößert wird.

Hinweis:Bitte sehen Sie setTransform() Methoden, die nicht relativ zu anderen Transformationen verhalten.

Beispiel

Zeichnen Sie ein Rechteck; fügen Sie eine neue Transformationsmatrix mit transform() hinzu und zeichnen Sie das Rechteck erneut; fügen Sie eine neue Transformationsmatrix hinzu und zeichnen Sie das Rechteck erneut. Beachten Sie, dass transform() bei jedem Aufruf auf dem vorherigen Transformationsmatrix aufbaut:

Ihr Browser unterstützt das HTML5 Canvas-Tag nicht.

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);

Versuchen Sie es selbst

Syntax

context.transform(a,b,c,d,e,f);

Parameterwert

Parameter Beschreibung
a Horizontale Skalierung der Zeichnung.
b Horizontale Neigung der Zeichnung.
c Vertikale Neigung der Zeichnung.
d Vertikale Skalierung der Zeichnung.
e Horizontale Bewegungszeichnung.
f Vertikale Bewegungszeichnung.

Browser-Unterstützung

Die in der Tabelle genannten Zahlen 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 das <canvas>-Element nicht.

HTML5 Canvas Referenzhandbuch