Exemple
Dessiner un rectangle, ajouter une nouvelle matrice de transformation avec transform() , dessinez le rectangle, ajouter une nouvelle matrice de transformation, puis dessinez le rectangle. Notez que chaque fois que vous appelez transform() , il se base 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); Essayez vous - même » Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| transform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Définition et utilisation
Chaque objet sur la toile a une matrice de transformation.
La transform() méthode remplace la matrice de transformation de courant. Il multiplie la matrice de transformation avec la matrice décrite par:
| une | c | e |
| b | ré | F |
| 0 | 0 | 1 |
En d' autres termes, la transform() méthode vous permet de redimensionner, faire pivoter, déplacer et incliner le contexte actuel.
Note: La transformation n'affectera dessins réalisés après la transform() méthode est appelée.
Note: La transform() méthode se comporte par rapport à d' autres transformations faites par rotate() , scale() , translate() , ou transform() . Exemple: Si vous avez déjà défini votre dessin à l' échelle par deux, et la transform() échelles méthode vos dessins par deux, vos dessins seront maintenant échelle par quatre.
Tip: Vérifiez la setTransform() méthode, qui ne se comporte pas relativement à d' autres transformations.
| syntaxe JavaScript: | context . transform( a,b,c,d,e,f ) ; |
|---|
Les valeurs des paramètres
| Paramètre | La description | Joue-le |
|---|---|---|
| a | Écailles le dessin horizontalement | Joue-le " |
| b | Biaiser le dessin horizontalement | Joue-le " |
| c | Biaiser le dessin verticalement | Joue-le " |
| d | Met à l'échelle du dessin verticalement | Joue-le " |
| e | Déplace le dessin horizontalement | Joue-le " |
| f | Déplace le dessin verticalement | Joue-le " |
<Canvas objet