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
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, 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
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
<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 Standard # dom-context-2d-transform-dev |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Das Interface, das diese Methode definiert:
CanvasRenderingContext2D
CanvasRenderingContext2D.setTransform()