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 :
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
Specification |
---|
HTML Standard # dom-context-2d-transform-dev |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- L'interface la définissant,
CanvasRenderingContext2D
CanvasRenderingContext2D.setTransform()