Méthode setTransform()
Exemple
Dessinez un rectangle. Réinitialisez la matrice de transformation. Dessinez à nouveau le rectangle. Réinitialisez la matrice de transformation. Dessinez-le encore une fois.
Chaque fois que vous appelez setTransform(), une nouvelle matrice est construite. Dans l'exemple ci-dessous, le rectangle rouge n'est pas visible car il se trouve sous le rectangle bleu :
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.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); Description
La méthode setTransform() met à l'échelle, fait pivoter, déplace et incline le contexte.
Chaque objet sur le canvas possède une matrice de transformation.
La méthode setTransform() réinitialise la matrice de transformation à la matrice identité, puis exécute transform() avec les mêmes arguments.
Remarque
La transformation affecte les dessins réalisés APRÈS l'appel de setTransform().
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 transform() (Met à l'échelle, fait pivoter, déplace, incline le contexte)
Syntaxe
| contexte .setTransform( a, b, c, d, e, f ) |
Valeurs des paramètres
| Paramètre | Description | Jouez-le |
|---|---|---|
| a | Met à l'échelle les dessins horizontalement | |
| b | Incline les dessins horizontalement | |
| c | Incline les dessins verticalement | |
| d | Met à l'échelle les dessins verticalement | |
| e | Déplace les dessins horizontalement | |
| f | Déplace les dessins verticalement |
Valeur de retour
| AUCUN |
Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
setTransform() est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |