Exemple
Tracer un rectangle, réinitialiser et créer une nouvelle matrice de transformation avec setTransform() , établir à nouveau le rectangle, réinitialiser et créer une nouvelle matrice de transformation, puis tracer le rectangle à nouveau. Notez que chaque fois que vous appelez setTransform() , il remet à zéro la matrice de transformation précédente et construit ensuite la nouvelle matrice, donc 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 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 | |||||
|---|---|---|---|---|---|
| setTransform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Définition et utilisation
Chaque objet sur la toile a une matrice de transformation.
Le setTransform() méthode remet à zéro la transformation actuelle de la matrice d'identité, puis exécute transform() avec les mêmes arguments.
En d' autres termes, la setTransform() 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 méthode setTransform est appelée.
| syntaxe JavaScript: | context . setTransform( a,b,c,d,e,f ) ; |
|---|
Les valeurs des paramètres
| 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 " |
<Canvas objet