Méthode Canvas transform()
Définition et utilisation
Chaque objet sur le canevas possède une matrice de transformation actuelle.
transform() Méthode qui remplace la matrice de transformation actuelle. Elle opère sur la matrice de transformation actuelle avec le matrice suivant décrit :
a c e b d f 0 0 1
Autrement dit, transform() vous permet de zoomer, de tourner, de déplacer et d'incliner l'environnement actuel.
Remarque :Cette transformation ne sera affectée que par le dessin après l'appel de transform().
Remarque :Le comportement de la méthode transform() par rapport à rotate(),scale(),translate() ou d'autres transformations effectuées par transform(). Par exemple : si vous avez déjà mis le dessin à deux fois, la méthode transform() doublera à nouveau le dessin, et votre dessin finira par être doublé quatre fois.
Astuce :Voir aussi setTransform() Méthode qui ne se comporte pas par rapport aux autres transformations.
Exemple
Tracez un rectangle ; ajoutez une nouvelle matrice de transformation avec transform() et tracez à nouveau le rectangle ; ajoutez une nouvelle matrice de transformation et tracez à nouveau le rectangle. Notez que chaque fois que vous appelez transform(), il construit sur la matrice de transformation précédente :
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
Syntaxe
context.transform(a,b,c,d,e,f);
Valeur du paramètre
| Paramètres | Description |
|---|---|
| a | Dessin de zoom 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 nombres 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 :Les versions 8 et antérieures d'Internet Explorer ne prennent pas en charge l'élément <canvas>.
