CanvasRenderingContext2D: setTransform()-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.setTransform()-Methode der Canvas 2D API setzt die aktuelle Transformation auf die Identitätsmatrix zurück (überschreibt sie) und führt anschließend eine durch die Argumente dieser Methode beschriebene Transformation aus. Dies ermöglicht das Skalieren, Rotieren, Verschieben (Translation) und Verzerren des Kontexts.

Hinweis: Siehe auch die transform()-Methode; anstatt die aktuelle Transformationsmatrix zu überschreiben, wird sie mit einer gegebenen multipliziert.

Syntax

js
setTransform(a, b, c, d, e, f)
setTransform(matrix)

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

Diese Transformationsmatrix wird links mit einem Spaltenvektor multipliziert, der jeden auf der Leinwand gezeichneten Punkt repräsentiert, um die endgültigen Koordinaten auf der Leinwand zu erhalten.

Parameter

setTransform() akzeptiert zwei Arten von Parametern. Der ältere Typ besteht aus mehreren Parametern, die die einzelnen Komponenten der Transformationsmatrix darstellen:

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.

Alternativ können Sie einen einzelnen Parameter übergeben, der ein Objekt ist, das die oben genannten Werte als Eigenschaften enthält. Die Parameternamen sind die Schlüssel der Eigenschaften, und falls zwei synonyme Namen gleichzeitig vorhanden sind (z. B. m11 und a), müssen sie denselben Zahlenwert haben, sonst wird ein TypeError ausgelöst. Die Verwendung der Objektform erlaubt das Weglassen einiger Parameter — a und d sind standardmäßig 1, während der Rest auf 0 gesetzt ist.

Wenn ein Punkt ursprünglich die Koordinaten (x,y)(x, y) hat, wird er nach der Transformation die Koordinaten (ax+cy+e,bx+dy+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 das horizontale und vertikale Verzerren des Kontexts.

Rückgabewert

Keiner (undefined).

Beispiele

Verzerren 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.setTransform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

Ergebnis

Abrufen und Übergeben eines DOMMatrix-Objekts

Im folgenden Beispiel haben wir zwei <canvas>-Elemente. Wir wenden eine Transformation auf den Kontext des ersten an, indem wir den ersten Typ von setTransform() verwenden und ein Quadrat darauf zeichnen. Dann rufen wir die Matrix mit CanvasRenderingContext2D.getTransform() von diesem ab.

Wir wenden dann die abgerufene Matrix direkt auf den Kontext der zweiten Leinwand an, indem wir das DOMMatrix-Objekt direkt an setTransform() übergeben (d. h. den zweiten Typ) und zeichnen einen Kreis darauf.

HTML

html
<!-- First canvas (ctx1) -->
<canvas width="240"></canvas>
<!-- Second canvas (ctx2) -->
<canvas width="240"></canvas>

CSS

css
canvas {
  border: 1px solid black;
}

JavaScript

js
const canvases = document.querySelectorAll("canvas");
const ctx1 = canvases[0].getContext("2d");
const ctx2 = canvases[1].getContext("2d");

ctx1.setTransform(1, 0.2, 0.8, 1, 0, 0);
ctx1.fillRect(25, 25, 50, 50);

let storedTransform = ctx1.getTransform();
console.log(storedTransform);

ctx2.setTransform(storedTransform);
ctx2.beginPath();
ctx2.arc(50, 50, 50, 0, 2 * Math.PI);
ctx2.fill();

Ergebnis

Spezifikationen

Specification
HTML
# dom-context-2d-settransform-dev

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
setTransform
Accept matrix object as parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch