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 Juli 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 rotieren, zu verschieben (zu translaten) und zu scheren.
Hinweis:
Siehe auch die setTransform()
-Methode, die die aktuelle Transformation auf die Einheitsmatrix zurücksetzt und dann transform()
aufruft.
Syntax
transform(a, b, c, d, e, f)
Die Transformationsmatrix wird beschrieben durch: .
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 hatte, dann wird er nach der Transformation die Koordinaten haben. Das bedeutet:
e
undf
steuern die horizontale und vertikale Verschiebung des Kontexts.- Wenn
b
undc
0
sind, steuerna
undd
die horizontale und vertikale Skalierung des Kontexts. - Wenn
a
undd
1
sind, steuernb
undc
das horizontale und vertikale Scheren des Kontexts.
Rückgabewert
Keiner (undefined
).
Beispiele
Scheren einer Form
Dieses Beispiel schert 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
Spezifikationen
Specification |
---|
HTML # dom-context-2d-transform-dev |
Browser-Kompatibilität
Loading…
Siehe auch
- Die Schnittstelle, die diese Methode definiert:
CanvasRenderingContext2D
CanvasRenderingContext2D.setTransform()