Exemple
Dessinez 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 fonde 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 - le vous - même » support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui soutient pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| transform() | Oui | 9.0 | Oui | Oui | Oui |
Définition et utilisation
Chaque objet sur la toile a une matrice de transformation courante.
La transform() méthode remplace la matrice de transformation en cours. Il multiplie la matrice de transformation avec la matrice décrite par:
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
En d' autres termes, la transform() méthode vous permet de redimensionner, faire pivoter, déplacer et skew le contexte actuel.
Remarque: 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à mis votre dessin à l' échelle par deux, et la transform() Pèse méthode vos dessins par deux, vos dessins va maintenant échelle par quatre.
Astuce: Consultez la setTransform() méthode, qui ne se comporte pas relativement à d' autres transformations.
| Syntaxe JavaScript: | context.transform( a,b,c,d,e,f ); |
|---|
Paramètre valeurs
| Paramètre | La description | Joue-le |
|---|---|---|
| a | Scales le dessin horizontalement | Joue-le " |
| b | Incliner le dessin du horizontalement | Joue-le " |
| c | Incliner le dessin verticalement la | Joue-le " |
| d | Scales le dessin verticalement | Joue-le " |
| e | Déplace le dessin du horizontalement | Joue-le " |
| f | Déplace le dessin verticalement la | Joue-le " |