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 # dom-context-2d-transform-dev |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
transform |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- Das Interface, das diese Methode definiert:
CanvasRenderingContext2D
CanvasRenderingContext2D.setTransform()