Méthode transform() du canvas HTML
Définition et utilisation
Chaque objet sur le canevas possède une matrice de transformation actuelle.
transform() Méthode remplace la matrice de transformation actuelle. Elle opère sur la matrice de transformation actuelle avec le matrice suivant décrit :
a c e b d f 0 0 1
Autrement dit, transform() vous permet de缩放、旋转、移动 et incliner l'environnement actuel.
Remarque :Cette transformation n'affectera que le dessin après l'appel à transform().
Remarque :Le comportement de la méthode transform() par rapport à rotate()etscale()ettranslate() ou d'autres transformations effectuées par transform(). Par exemple : si vous avez déjà mis le dessin à double, la méthode transform() agrandira le dessin de deux fois, et votre dessin finira par être agrandi de quatre fois.
Astuce :Voir setTransform() Méthode, qui ne se comporte pas par rapport à d'autres transformations.
Exemple
Tracez un rectangle ; ajoutez une nouvelle matrice de transformation avec transform() et tracez à nouveau le rectangle ; ajoutez une nouvelle matrice de transformation et tracez à nouveau le rectangle. Notez que chaque fois que vous appellez transform(), il construit 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);
Syntaxe
context.transform(a,b,c,d,e,f);
Valeur du paramètre
| Paramètres | Description |
|---|---|
| a | Dessin de zoom horizontal. |
| b | Dessin d'inclinaison horizontal. |
| c | Dessin d'inclinaison vertical. |
| d | Dessin de zoom vertical. |
| 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>.
