HTML-Leinwand-Transformation () -Methode
Beispiele
Zeichnen Sie ein Rechteck, das durch Transformation () eine neue Transformationsmatrix hinzuzufügen, wieder ein Rechteck zu zeichnen, eine neue Transformationsmatrix hinzu, und dann ziehen Sie ein Rechteck wieder. Bitte beachten Sie, dass, wann immer Sie verwandeln () aufrufen, wird es das erste sein, um eine Transformation auf die Matrix zu bauen:
JavaScript:
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 »
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari-Unterstützung () -Methode zu transformieren.
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.
transform () -Methode ersetzt die aktuelle Transformationsmatrix. Es ist eine Matrixoperation unter der aktuellen Transformationsmatrix beschrieben:
| ein | c | e |
| b | d | f |
| 0 | 0 | 1 |
Mit anderen Worten, transform () ermöglicht es Ihnen, zu zoomen, drehen, verschieben und die aktuelle Umgebung zu kippen.
Anmerkung: Diese Umwandlung wird nur die Transformation beeinflussen () Methode nach der Zeichnung bezeichnet wird.
Hinweis: Das Verhalten Transformation () Methode mit Bezug auf die andere durch Drehen umgewandelt (), scale (), translate () oder Transformation () beendet.Zum Beispiel: Wenn Sie bereits in der Zeichnung zweimal eingestellt haben, dann verwandeln () -Methode wird die Zeichnung vergrößern, wird Ihre Zeichnung schließlich zu vier Mal vergrößert werden.
Tipp: Schauen Sie sich setTransform () Methode, die nicht relativ zu anderen Verhalten verwandeln auftreten.
| JavaScript-Syntax: | Kontext .transform (a, b, c, d, e, f); |
|---|
Parameter Wert
| 参数 | 描述 |
|---|---|
| a | 水平缩放绘图。 |
| b | 水平倾斜绘图。 |
| c | 垂直倾斜绘图。 |
| d | 垂直缩放绘图。 |
| e | 水平移动绘图。 |
| f | 垂直移动绘图。 |