CanvasRenderingContext2D.transform()

La méthode CanvasRenderingContext2D.transform () de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte.

Voir aussi la méthode setTransform() qui réinitialise la transformation courante à la matrice identité puis invoque transform().

Syntaxe

void ctx.transform(a, b, c, d, e, f);

La matrice de transformation est décrite par : [ a c e b d f 0 0 1 ] \left[ \begin{array}{ccc} a & c & e \ b & d & f \ 0 & 0 & 1 \end{array} \right]

Paramètres

a (m11)

Échelle horizontale.

b (m12)

Inclinaison horizontale.

c (m21)

Inclinaison verticale.

d (m22)

Échelle verticale.

e (dx)

Déplacement horizontal.

f (dy)

Déplacement vertical.

Exemples

Utilisation de la méthode transform

Ceci est seulement un fragment de code simple utilisant la méthode transform.

HTML

<canvas id="canevas"></canvas>

JavaScript

var canevas = document.getElementById('canevas');
var ctx = canevas.getContext('2d');

ctx.transform(1, 1, 0, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :

Code jouable

Spécifications

Spécification Statut Commentaire
HTML Living Standard
La définition de 'CanvasRenderingContext2D.transform' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi