Toile HTML méthode setTransform ()
Exemple
Dessinez un rectangle, réinitialisez et créez une nouvelle matrice de transformation avec setTransform(), dessinez à nouveau le rectangle, réinitialisez et créez une nouvelle matrice de transformation, puis dessinez à nouveau 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, donc dans l'exemple ci-dessous, le rectangle rouge n'est pas affiché, car il se trouve 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);
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la méthode.
| Method | |||||
|---|---|---|---|---|---|
| setTransform() | Yes | 9.0 | Yes | Yes | Yes |
Définition et utilisation
Chaque objet sur le canevas a une matrice de transformation actuelle.
La méthode setTransform() réinitialise la transformation actuelle à la matrice d'identité, puis exécute transform() avec les mêmes arguments.
En d'autres termes, la méthode setTransform() vous permet de mettre à l'échelle, de faire pivoter, de déplacer et d'incliner le contexte actuel.
Remarque : La transformation n'affectera que les dessins créés après l'appel de la méthode setTransform.
| Syntaxe JavaScript : | contexte .setTransform( a,b,c,d,e,f ); |
|---|
Valeurs des paramètres
| Parameter | Description | Play it |
|---|---|---|
| a | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
❮ Référence de canevas HTML