Canvas transform() -Methode
Definition und Verwendung
Jedes Objekt auf dem Canvas hat eine aktuelle Transformationsmatrix.
transform() Methode ersetzt die aktuelle Transformationsmatrix. Sie operiert mit der folgenden Matrix:
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 bewegen und zu neigen.
Anmerkung:Diese Transformation beeinflusst nur das Zeichnen, das nach dem Aufruf von transform() durchgeführt wird.
Anmerkung:Das Verhalten der transform() -Methode ist relativ zu rotate(),scale(),translate() oder andere Transformationen, die durch transform() durchgeführt werden. Zum Beispiel: Wenn Sie das Zeichnen bereits auf das Zweifache vergrößert haben, wird die Methode transform() das Zeichnen noch einmal verdoppeln, sodass Ihr Zeichnen letztlich viermal so groß wird.
Hinweis:Bitte sehen Sie setTransform() Methode, die nicht relativ zu anderen Transformationen verhält.
Beispiel
Zeichnen Sie ein Rechteck; fügen Sie eine neue Transformationsmatrix über 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() immer auf dem 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);
语法
context.transform(a,b,c,d,e,f);
参数值
| 参数 | 描述 |
|---|---|
| a | 水平缩放绘图。 |
| b | 水平倾斜绘图。 |
| c | 垂直倾斜绘图。 |
| d | 垂直缩放绘图。 |
| e | 水平移动绘图。 |
| f | 垂直移动绘图。 |
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
| 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.
