Méthode transform()de canvas HTML

HTML canvas 参考手册Référence HTML canvas

Exemple

Dessinez un rectangle, ajoutez une nouvelle matrice de transformation avec transform(), dessinez à nouveau le rectangle, ajoutez une nouvelle matrice de transformation, puis dessinez à nouveau le rectangle. Notez que chaque fois que vous appelez transform(), cela s'appuie sur la matrice de transformation précédente :

Votre navigateur ne prend pas en charge la balise canvas HTML5.

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);

Essayez-le vous-même »

Prise en charge des navigateurs

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge la méthode transform().

Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

Chaque objet sur le canvas possède une matrice de transformation courante.

La méthode transform() remplace la matrice de transformation actuelle. Elle opère sur la matrice de transformation actuelle avec la matrice décrite ci-dessous :

a c e
b d f
0 0 1

En d'autres termes, transform() vous permet de mettre à l'échelle, faire pivoter, déplacer et incliner le contexte actuel.

Remarque :La transformation n'affecte que les dessins effectués après l'appel de la méthode transform().

Remarque :Le comportement de la méthode transform() est relatif aux autres transformations effectuées par rotate(), scale(), translate() ou transform(). Par exemple : si vous avez déjà défini le dessin comme étant deux fois plus grand, la méthode transform() doublera le dessin, et votre dessin finira par être quatre fois plus grand.

Astuce :Veuillez consulter la méthodesetTransform(), qui ne se comporte pas relativement aux autres transformations.

Syntaxe JavaScript : context.transform(a,b,c,d,e,f);

Valeurs des paramètres

Paramètre Description
a Mettre le dessin à l'échelle horizontalement.
b Incliner le dessin horizontalement.
c Incliner le dessin verticalement.
d Mettre le dessin à l'échelle verticalement.
e Déplacer le dessin horizontalement.
f Déplacer le dessin verticalement.

HTML canvas 参考手册Référence HTML canvas Autres extensions