CanvasRenderingContext2D: transform()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die CanvasRenderingContext2D.transform()-Methode der Canvas 2D API multipliziert die aktuelle Transformation mit der Matrix, die durch die Argumente dieser Methode beschrieben wird. Dies ermöglicht es Ihnen, den Kontext zu skalieren, zu drehen, zu verschieben und zu verzerren.

Hinweis: Siehe auch die setTransform()-Methode, die die aktuelle Transformation auf die Identitätsmatrix zurücksetzt und dann transform() aufruft.

Syntax

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

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

Parameter

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 ) (x, y) hatte, wird er nach der Transformation die Koordinaten ( a x + c y + e , b x + d y + f ) (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.

Rückgabewert

Keiner (undefined).

Beispiele

Verzerrung einer Form

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

HTML

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

JavaScript

js
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

Spezifikationen

Specification
HTML Standard
# dom-context-2d-transform-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch