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.

DieCanvasRenderingContext2D.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 diesetTransform()-Methode, die die aktuelle Transformation auf die Einheitsmatrix zurücksetzt und danntransform() aufruft.

Syntax

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

Die Transformationsmatrix wird beschrieben durch: $[\begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array}] \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, dann 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 undf steuern die horizontale und vertikale Verschiebung des Kontexts.
Wennb undc0 sind, steuerna undd die horizontale und vertikale Skalierung des Kontexts.
Wenna undd1 sind, steuernb undc das horizontale und vertikale Scheren des Kontexts.

HTML

html

<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);