Exemple
Dessinez un rectangle, réinitialiser et créer une nouvelle matrice de transformation avec setTransform() , dessinez le rectangle, réinitialiser et créer une nouvelle matrice de transformation, puis dessinez le rectangle. Notez que chaque fois que vous appelez setTransform() , il réinitialise la matrice de transformation précédente, puis construit la nouvelle matrice, de sorte que dans l'exemple ci - dessous, le rectangle rouge n'apparaît pas, car il est sous le rectangle bleu:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.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);
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 | |||||
|---|---|---|---|---|---|
| setTransform() | Oui | 9.0 | Oui | Oui | Oui |
Définition et utilisation
Chaque objet sur la toile a une matrice de transformation courante.
Le setTransform() méthode réinitialise le courant de transformation à la matrice d'identité, et exécute ensuite transform() avec les mêmes arguments.
En d' autres termes, le setTransform() méthode vous permet de redimensionner, faire pivoter, déplacer et incliner le contexte actuel.
Remarque: La transformation n'affectera dessins réalisés après la méthode de setTransform est appelée.
| Syntaxe JavaScript: | context.setTransform( a,b,c,d,e,f ); |
|---|
Paramètre valeurs
| Paramètre | La description | Joue-le |
|---|---|---|
| a | Scales dessins horizontalement | Joue-le " |
| b | Biaise les dessins horizontalement | Joue-le " |
| c | Biaise les dessins verticalement | Joue-le " |
| d | Scales dessins verticalement | Joue-le " |
| e | Déplace les dessins horizontalement | Joue-le " |
| f | Déplace les dessins verticalement | Joue-le " |