Latest web development tutorials

canvas HTML transform () méthode

HTML Manuel toile de référence HTML Manuel toile de référence

Exemples

Dessinez un rectangle par transformation () pour ajouter une nouvelle matrice de transformation, de nouveau dessiner un rectangle, ajouter une nouvelle matrice de transformation, puis dessinez à nouveau un rectangle. S'il vous plaît noter que chaque fois que vous appelez transform (), il sera le premier à construire une transformation de la matrice:

YourbrowserdoesnotsupporttheHTML5canvastag.

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 »

support du navigateur

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, le support Firefox, Opera, Chrome et Safari procédé de transformation ().

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

Définition et utilisation

Chaque objet sur la toile a une matrice de transformation courante.

transform () méthode remplace la matrice de transformation en cours. Il est une opération matricielle décrite ci-dessous à la matrice de transformation:

un c e
b ré fa
0 0 1

En d'autres termes, transformer () vous permet de zoomer, faire pivoter, déplacer et incliner l'environnement actuel.

Remarque: Cette conversion n'affectera la méthode transform () est appelée après le dessin.

Remarque: Le comportement procédé de transformation () par rapport à l'autre converti par rotation (), scale (), traduire () ou transformée () terminée.Par exemple: Si vous avez déjà défini deux fois dans le dessin, puis transform () méthode amplifiera le dessin, votre dessin sera éventuellement élargie à quatre fois.

Départ: Tip setTransform () méthode, qui ne se produit pas par rapport à un autre comportement de transformation.

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

Paramètre Valeur

参数 描述
a 水平缩放绘图。
b 水平倾斜绘图。
c 垂直倾斜绘图。
d 垂直缩放绘图。
e 水平移动绘图。
f 垂直移动绘图。

HTML Manuel toile de référence HTML Manuel toile de référence