CanvasRenderingContext2D.setTransform()
La méthode CanvasRenderingContext2D.setTransform()
de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode.
Voir aussi la méthode transform()
, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée..
Syntaxe
js
void ctx.setTransform(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 setTransform
Ceci est seulement un fragment de code simple qui utilise la méthode setTransform
.
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.setTransform(1, 1, 0, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);
Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :
Code jouable
Spécifications
Specification |
---|
HTML Standard # dom-context-2d-settransform-dev |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- L'interface la définissant,
CanvasRenderingContext2D
CanvasRenderingContext2D.transform()