Méthode HTML canvas 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. Notez que chaque fois que vous appelez transform(), il s'appuie 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);
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la méthode.
| Method | |||||
|---|---|---|---|---|---|
| transform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Définition et utilisation
Chaque objet sur le canevas a une matrice de transformation actuelle.
La méthode transform() remplace la matrice de transformation actuelle. Il multiplie la matrice de transformation courante par la matrice décrite par :
| une | c | e |
| b | ré | F |
| 0 | 0 | 1 |
En d'autres termes, la méthode transform() vous permet de mettre à l'échelle, de faire pivoter, de déplacer et d'incliner le contexte actuel.
Remarque : La transformation n'affectera que les dessins créés après l'appel de la méthode transform().
Remarque : La méthode transform() se comporte relativement aux autres transformations effectuées par rotate(), scale(), translate() ou transform(). Exemple : si vous avez déjà mis votre dessin à l'échelle par deux et que la méthode transform() met vos dessins à l'échelle par deux, vos dessins seront désormais mis à l'échelle par quatre.
Astuce : Découvrez la méthode setTransform() , qui ne se comporte pas relativement aux autres transformations.
| Syntaxe JavaScript : | contexte .transform( a, b, c, d, e, f ); |
|---|
Valeurs des paramètres
| Parameter | Description | Play it |
|---|---|---|
| a | Scales the drawing horizontally | |
| b | Skew the the drawing horizontally | |
| c | Skew the the drawing vertically | |
| d | Scales the drawing vertically | |
| e | Moves the the drawing horizontally | |
| f | Moves the the drawing vertically |
❮ Objet de toile