Canvas setTransform() Methode

Canvas-Referenzhandbuch

Definition und Verwendung

Jedes Objekt auf dem Canvas hat eine aktuelle Transformationsmatrix.

setTransform() Methode setzt die aktuelle Transformationsmatrix auf die Einheitsmatrix zurück und führt sie mit denselben Parametern aus transform().

Mit anderen Worten, setTransform() ermöglicht es Ihnen, die aktuelle Umgebung zu skalieren, zu drehen, zu bewegen und zu neigen.

Anmerkung:Diese Transformation beeinflusst nur die Zeichnungen, die nach dem Aufruf von setTransform() erfolgen.

Beispiel

Zeichnen Sie ein Rechteck, setzen Sie mit setTransform() die Transformation zurück und erstellen Sie ein neues Transformationsmatrix, zeichnen Sie erneut ein Rechteck, setzen Sie zurück und erstellen Sie ein neues Transformationsmatrix, zeichnen Sie dann noch einmal ein Rechteck. Beachten Sie, dass der rote Rechteck in diesem Beispiel nicht sichtbar ist, da es unter dem blauen Rechteck liegt:

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

亲自试一试

语法

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

参数值

参数 描述
a 水平旋转绘图。
b 水平倾斜绘图。
c 垂直倾斜绘图。
d 垂直缩放绘图。
e Horizontale Bewegungszeichnung.
f Vertikale Bewegungszeichnung.

Browser-Unterstützung

Die in der Tabelle genannten Zahlen beziehen sich auf die erste Browserversion, die 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.

Canvas-Referenzhandbuch