Méthode setTransform()du canvas HTML

HTML canvas 参考手册Manuel de référence HTML canvas

Exemples

Dessinez un rectangle, utilisez setTransform() pour réinitialiser et créer une nouvelle matrice de transformation, 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(), cela réinitialise la matrice de transformation précédente puis construit une nouvelle matrice, donc dans l'exemple ci-dessous, le rectangle rouge ne sera pas affiché car il se trouve sous le rectangle bleu :

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

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 setTransform().

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 setTransform() réinitialise la matrice de transformation actuelle à la matrice identité, puis exécute transform() avec les mêmes paramètres.transform()。

En d'autres termes, setTransform() vous permet de mettre à l'échelle, faire pivoter, déplacer et incliner l'environnement courant.

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

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

Valeurs des paramètres

Paramètre Description
a Met le dessin à l'échelle horizontalement.
b Incline le dessin horizontalement.
c Incline le dessin verticalement.
d Met le dessin à l'échelle verticalement.
e Déplace le dessin horizontalement.
f Déplace le dessin verticalement.

HTML canvas 参考手册Manuel de référence HTML canvas Autres extensions