Manuel de référence HTML

Complète des étiquettes HTML

Méthode setTransform() pour HTML canvas

setTransform() est une méthode de Canvas 2L'API D utilise la matrice unitaire pour réinitialiser (couvrir) la transformation actuelle et appeler les méthodes de transformation, cette transformation est décrite par les variables des méthodes.

Référence du manuel HTML canvas

Exemple en ligne

Tracez un rectangle, utilisez setTransform() pour réinitialiser et créer un nouveau matrice de transformation, dessinez à nouveau le rectangle, réinitialisez et créez un nouveau matrice de transformation, puis dessinez à nouveau le rectangle. Notez que lors de chaque appel à setTransform(), il réinitialise le matrice de transformation précédente et construit un nouveau matrice, donc le rectangle rouge n'est pas visible dans l'exemple suivant, car il se trouve sous le rectangle bleu :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Utilisation de la méthode setTransform() pour HTML canvas-Tutoriel de base(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge l'HTML5　l'élément canvas.
</canvas>
<script>
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);
</script>
</body>
</html>

Voyons le test ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

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

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

Définition et utilisation

Chaque objet sur le canvas a une matrice de transformation actuelle.

La méthode setTransform() réinitialise la matrice de transformation actuelle à la matrice unitaire et exécute ensuite transform().

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

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

Syntaxe JavaScript :	context.setTransform(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.

Référence du manuel HTML canvas

HTML: <template> balise