Méthode transform()
Exemple
Dessinez un rectangle, ajoutez une nouvelle matrice de transformation avec transform(), dessinez à nouveau le rectangle, ajoutez une nouvelle matrice de transformation, puis dessinez à nouveau le rectangle. Remarquez qu'à chaque fois que vous appelez transform(), cela s'appuie sur la matrice de transformation précédente :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.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); Description
La méthode transform() permet de mettre à l'échelle, de faire pivoter, de déplacer et d'incliner le contexte.
Chaque objet sur le canvas possède une matrice de transformation.
La méthode transform() remplace la matrice de transformation et la multiplie par une matrice décrite par :
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
Notes
La transformation affecte les dessins réalisés APRÈS l'appel de transform().
La transformation est relative aux autres transformations rotate(), scale(), translate() ou transform(). Si vous appliquez un facteur de mise à l'échelle de deux, et que transform() applique également un facteur de mise à l'échelle de deux, les dessins seront mis à l'échelle par quatre.
Voir aussi :
La méthode scale() (Met à l'échelle le contexte)
La méthode rotate() (Fait pivoter le contexte)
La méthode translate() (Remappe la position 0,0)
La méthode setTransform() (Met à l'échelle, fait pivoter, déplace, incline le contexte).
Syntaxe
| context .transform( a, b, c, d, e, f ) |
Valeurs des paramètres
| Param | Description | Jouez-le |
|---|---|---|
| a | Met à l'échelle le dessin horizontalement | |
| b | Incline le dessin horizontalement | |
| c | Incline le dessin verticalement | |
| d | Met à l'échelle le dessin verticalement | |
| e | Déplace le dessin horizontalement | |
| f | Déplace le dessin verticalement |
Valeur de retour
| AUCUN |
Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
transform() est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |