Metoda Canvas setTransform()

Podręcznik Canvas

Definicja i użycie

Każdy obiekt na płótnie ma bieżącą macierz transformacji.

setTransform() metoda zresetuje bieżącą macierz transformacji do macierzy jednostkowej, a następnie uruchomi setTransform() z tymi samymi parametrami transform().

Innymi słowy, setTransform() pozwala na skalowanie, obracanie, przemieszczanie i nachylenie bieżącego środowiska.

Komentarz:Ta transformacja wpływa tylko na rysunek po wywołaniu metody setTransform().

Przykład

Narysuj prostokąt, za pomocą setTransform() zresetuj i utwórz nową macierz transformacji, ponownie narysuj prostokąt, zresetuj i utwórz nową macierz transformacji, a następnie jeszcze raz narysuj prostokąt. Proszę zauważyć, że w poniższym przykładzie nie będzie widoczny czerwony prostokąt, ponieważ znajduje się pod niebieskim prostokątem:

Twoja przeglądarka nie obsługuje znacznika HTML5 canvas.

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

Spróbuj sam

Gramatyka

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

Wartości parametrów

Parametry Opis
a Poziome obracanie rysunku.
b Poziome nachylenie rysunku.
c Pionowe nachylenie rysunku.
d Pionowe skalowanie rysunku.
e Rysowanie poziome
f Rysowanie pionowe

Obsługa przeglądarek

Numer w tabeli oznacza pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Komentarz:Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.

Podręcznik Canvas