HTML płótnie przekształcić () metoda

Przykłady

Narysuj prostokąt po transformacji (), aby dodać nową macierz transformacji, ponownie narysować prostokąt, dodać nową macierz transformacji, a następnie ponownie narysować prostokąt. Należy pamiętać, że gdy nazywamy przekształcenie (), to będzie pierwszy zbudować transformacji na matrycy:

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

Spróbuj »

Pomoc Browser

Internet Explorer 9, Firefox, Opera, Chrome i Safari wsparcie przekształcenia metody ().

Uwaga: 8 i wcześniejsze wersje programu Internet Explorer nie obsługuje <canvas> elementu.

Definicja i Wykorzystanie

Każdy obiekt na płótnie posiada aktualną macierz transformacji.

transformacji () metoda zastępuje bieżącą macierz transformacji. Jest to operacja matrycy opisane poniżej, w bieżącej macierzy transformacji:

	c	e
b	d	f
0	0	1

Innymi słowy, przekształcenie () pozwala powiększać, obracać, przesuwać i pochylać bieżące środowisko.

Uwaga: Ta konwersja będzie dotyczyła jedynie metoda transformacji () jest wywoływana po rysunku.

Uwaga: Zachowanie metodą transformaty () w stosunku do drugiej przekształcany przez obracania (), skala () przekładają () lub transformacji () zakończone.Na przykład: Jeśli masz już zestaw do rysunku dwa razy, a następnie przekształcenie () metoda zostanie powiększona, rysunek, rysunek zostanie ostatecznie powiększony czterokrotnie.

Sprawdź końcówka setTransform () metoda, która nie występuje w stosunku do drugiej przemiany zachowania.

Składnia JavaScript:	.transform kontekst (a, b, c, d, e, f);

parametr Wartość

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

HTML Instrukcja płótno referencyjny

Poprzedni: HTML płótnie () metoda