Méthode setTransform() de canvas HTML
Définition et utilisation
Chaque objet sur le canevas possède un matrice de transformation actuel.
setTransform() La méthode réinitialise le matrice de transformation actuel à la matrice unitaire, puis exécute avec les mêmes paramètres transform().
En d'autres termes, setTransform() vous permet de zoomer, de pivoter, de déplacer et d'incliner l'environnement actuel.
Remarque :Cette transformation ne peut affecter que le dessin appelé après setTransform().
Exemple
Tracez un rectangle, réinitialisez et créez un nouveau matrice de transformation avec setTransform(), dessinez à nouveau un rectangle, réinitialisez et créez un nouveau matrice de transformation, puis dessinez à nouveau un rectangle. Notez que lorsque vous appellez setTransform(), il réinitialise le matrice de transformation précédent et construit un nouveau matrice. Par conséquent, dans l'exemple suivant, le rectangle rouge ne sera pas visible, car il se trouve sous le rectangle bleu :
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
Syntaxe
context.setTransform(a,b,c,d,e,f);
Valeur du paramètre
| Paramètres | Description |
|---|---|
| a | Dessin de rotation horizontal. |
| b | Dessin de décalage horizontal. |
| c | Dessin de décalage vertical. |
| d | Dessin de zoom vertical. |
| e | Dessin de déplacement horizontal. |
| f | Dessin de déplacement vertical. |
Support du navigateur
Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.
