CanvasRenderingContext2D: transform()-Methode

transform(a, b, c, d, e, f)

Die Transformationsmatrix wird beschrieben durch: $\left[ \begin{array}{ccc} a & c & e \ b & d & f \ 0 & 0 & 1 \end{array} \right]$.

a (m11)

Die Zelle in der ersten Zeile und ersten Spalte der Matrix.

b (m12)

Die Zelle in der zweiten Zeile und ersten Spalte der Matrix.

c (m21)

Die Zelle in der ersten Zeile und zweiten Spalte der Matrix.

d (m22)

Die Zelle in der zweiten Zeile und zweiten Spalte der Matrix.

e (m41)

Die Zelle in der ersten Zeile und dritten Spalte der Matrix.

f (m42)

Die Zelle in der zweiten Zeile und dritten Spalte der Matrix.

Wenn ein Punkt ursprünglich die Koordinaten $(x, y)$ hatte, wird er nach der Transformation die Koordinaten $(ax + cy + e, bx + dy + f)$ haben. Das bedeutet:

• e und f steuern die horizontale und vertikale Verschiebung des Kontexts.
• Wenn b und c 0 sind, steuern a und d die horizontale und vertikale Skalierung des Kontexts.
• Wenn a und d 1 sind, steuern b und c die horizontale und vertikale Verzerrung des Kontexts.

Keiner (undefined).

Dieses Beispiel verzerrt ein Rechteck sowohl vertikal (.2) als auch horizontal (.8). Skalierung und Verschiebung bleiben unverändert.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.transform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

Ergebnis

• Das Interface, das diese Methode definiert: CanvasRenderingContext2D
• CanvasRenderingContext2D.setTransform()