Neueste Web-Entwicklung Tutorials
 

HTML canvas transform() Method

<Canvas Object

Beispiel

Zeichnen eines Rechtecks, fügen eine neue Transformations - Matrix mit transform() , um das Rechteck zeichnen wieder, fügen eine neue Transformations - Matrix, dann wieder das Rechteck zeichnen. Beachten Sie, dass jedes Mal , wenn Sie anrufen transform() , es baut auf der vorhergehenden Transformationsmatrix:

YourbrowserdoesnotsupporttheHTML5canvastag.

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);
Versuch es selber "

Browser-Unterstützung

Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Methode vollständig unterstützt.

Methode
transform() 4.0 9.0 3.6 4.0 10.1

Definition und Verwendung

Jedes Objekt auf der Leinwand hat eine aktuelle Transformationsmatrix.

Die transform() Methode ersetzt die aktuelle Transformationsmatrix. Er multipliziert die aktuelle Transformationsmatrix mit der Matrix beschrieben von:

ein c e
b d f
0 0 1

Mit anderen Worten, die transform() -Methode können Sie skalieren, drehen, verschieben und verdrehen den aktuellen Kontext.

Note: Die Transformation nur aus Zeichnungen beeinflussen wird nach der transform() Methode aufgerufen wird.

Note: Die transform() Methode verhält sich relativ zu anderen Transformationen hergestellt durch rotate() , scale() , translate() oder transform() . Beispiel: Wenn Sie bereits Ihre Zeichnung maßstab von zwei festgelegt haben, und die transform() Methode , mit zwei Ihre Zeichnungen skaliert, Ihre Zeichnungen werden nun Skala von vier.

Tip: Überprüfen Sie die aus setTransform() Methode, die nicht relativ zu anderen Transformationen verhält.

JavaScript-Syntax: context . transform( a,b,c,d,e,f ) ;

Parameterwerte

Parameter Beschreibung Spiel es
a Skaliert die Zeichnung horizontal Spiel es "
b Skew die die Zeichnung horizontal Spiel es "
c Skew die die Zeichnung vertikal Spiel es "
d Skaliert die Zeichnung vertikal Spiel es "
e Verschiebt die die Zeichnung horizontal Spiel es "
f Die Bewegungen der Zeichnung vertikal Spiel es "

<Canvas Object