Latest web development tutorials

méthode canevas HTML setTransform ()

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

Exemples

Dessinez un rectangle par setTransform () réinitialise et créer une nouvelle matrice de transformation, dessinez un rectangle, réinitialiser et créer une nouvelle matrice de transformation, puis dessinez à nouveau un rectangle. S'il vous plaît noter que chaque fois que vous appelez setTransform (), qui remet à zéro avant une matrice de transformation, puis construire une nouvelle matrice, dans l'exemple ci-dessous, le rectangle rouge est pas affichée car elle est en dessous du rectangle bleu:

YourbrowserdoesnotsupporttheHTML5canvastag.

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 »

support du navigateur

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, la méthode Firefox, Opera, Chrome et Safari soutien setTransform ().

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.

méthode setTransform () à la matrice de transformation courante Remet la matrice, puis exécutez avec les mêmes paramètres Transform () .

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

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

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