HTML-Leinwand setTransform () -Methode
Beispiele
Zeichnen Sie ein Rechteck von setTransform () zurückgesetzt und eine neue Transformationsmatrix, zeichnen Sie ein Rechteck wieder zurückgesetzt und eine neue Transformationsmatrix, und dann ziehen Sie ein Rechteck wieder. Bitte beachten Sie, dass, wann immer Sie setTransform () aufrufen, die vor einer Transformationsmatrix setzt und dann eine neue Matrix aufzubauen, in dem folgenden Beispiel wird das rote Rechteck nicht angezeigt, weil sie unter dem blauen Rechteck ist:
JavaScript:
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);
Versuchen »
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari Unterstützung setTransform () -Methode.
Hinweis: 8 und frühere Versionen von Internet Explorer unterstützt nicht das <canvas> -Element.
Definition und Verwendung
Jedes Objekt auf der Leinwand hat eine aktuelle Transformationsmatrix.
setTransform () -Methode auf die aktuelle Transformationsmatrix Setzt die Matrix, und dann mit den gleichen Parametern laufen die (Transformation) .
Mit anderen Worten, können Sie setTransform () zu vergrößern, drehen, bewegen und die aktuelle Umgebung zu kippen.
Hinweis: Diese Umwandlung betrifft nur setTransform () -Methode wird nach der Zeichnung bezeichnet.
| JavaScript-Syntax: | Kontext .setTransform (a, b, c, d, e, f); |
|---|
Parameter Wert
| 参数 | 描述 |
|---|---|
| a | 水平缩放绘图。 |
| b | 水平倾斜绘图。 |
| c | 垂直倾斜绘图。 |
| d | 垂直缩放绘图。 |
| e | 水平移动绘图。 |
| f | 垂直移动绘图。 |