Manuel de référence HTML

Tous les balises HTML

Méthode transform() sur HTML canvas

transform() est une méthode de Canvas 2L'API D utilise plusieurs fois la méthode de superposition de la transformation actuelle avec des matrices, décrites par les paramètres de la méthode. Vous pouvez agrandir, faire pivoter, déplacer et incliner le contexte.

Manuel de référence HTML canvas

Exemple en ligne

Tracez un rectangle, utilisez transform() pour ajouter une nouvelle matrice de transformation, dessinez à nouveau le rectangle, ajoutez une nouvelle matrice de transformation, puis dessinez à nouveau le rectangle. Notez que chaque appel à transform() se base sur la matrice de transformation précédente :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Utilisation de la méthode transform() sur HTML canvas-Tutoriel de base(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" hauteur="15"  style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　balise canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
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);
</script>
</body>
</html>

Vérifiez et voyez ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

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

Attention :Internet Explorer 8 Les versions précédentes ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

Chaque objet sur le canevas possède une matrice de transformation actuelle.

La méthode transform() remplace la matrice de transformation actuelle. Elle multiplie la matrice de transformation actuelle par la matrice décrite ci-dessous :

a	c	e
b	d	f
0	0	1

Autrement dit, transform() vous permet de redimensionner, tourner, déplacer et incliner l'environnement actuel.

Attention :Cette transformation n'affecte que le dessin après l'appel de la méthode transform().

Attention :Le comportement de la méthode transform() par rapport aux autres transformations effectuées par rotate(), scale(), translate() ou transform(). Par exemple : si vous avez déjà mis le dessin à double taille, la méthode transform() agrandira le dessin de deux fois, et votre dessin final sera agrandi de quatre fois.

Avis :Voir également setTransform() Méthode qui ne se comporte pas par rapport à d'autres transformations.

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

Valeur du paramètre

Paramètres	Description
a	Agrandissement horizontal du dessin.
b	Inclinaison horizontale du dessin.
c	Inclinaison verticale du dessin.
d	Agrandissement vertical du dessin.
e	Déplacement horizontal du dessin.
f	Déplacement vertical du dessin.

Manuel de référence HTML canvas

HTML: <template> balise