Méthode Canvas setTransform()
Définition et utilisation
Chaque objet sur le canevas possède un matrice de transformation actuel.
setTransform() La méthode réinitialise le matrice de transformation actuel à la matrice unitaire, puis exécute avec les mêmes paramètres transform().
En d'autres termes, setTransform() vous permet de缩放、旋转、移动并倾斜当前的环境。
Remarque :Cette transformation n'affecte que le dessin après l'appel de setTransform().
Exemple
Tracez un rectangle, réinitialisez et créez un nouveau matrice de transformation avec setTransform(), tracez à nouveau un rectangle, réinitialisez et créez un nouveau matrice de transformation, puis tracez à nouveau un rectangle. Notez que chaque fois que vous appelez setTransform(), il réinitialise le matrice de transformation précédente et construit un nouveau matrice. Dans l'exemple suivant, le rectangle rouge ne sera pas visible 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);
Syntaxe
context.setTransform(a,b,c,d,e,f);
Valeur des paramètres
| Paramètres | Description |
|---|---|
| a | Rotation horizontale de la visualisation graphique. |
| b | Inclinaison horizontale de la visualisation graphique. |
| c | Inclinaison verticale de la visualisation graphique. |
| d | Ajustement vertical de la visualisation graphique. |
| e | Dessin de déplacement horizontal. |
| f | Dessin de déplacement vertical. |
Prise en charge du navigateur
Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.
