[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.transform()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

transform(a, b, c, d, e, f)

Przykłady:

<script>

 window.onload = () => {

 const szer = 600;
 const wys = 400;

 const can = document.querySelectorAll("canvas");
 
 const ctx1 = can[0].getContext("2d");
 const ctx2 = can[1].getContext("2d");
 
 can[0].width = szer;
 can[0].height = wys; 
 can[1].width = szer;
 can[1].height = wys; 
 
 ctx1.transform(1, 0.3, 0.4, 1, 10, 10);
 ctx1.fillRect(0, 0, 40, 40);

 ctx1.fillStyle = "blue";
 ctx1.fillRect(50, 50, 150, 80)
 ctx1.transform(1, -0.4, -0.4, 1, 200, 50);

 ctx2.fillStyle = "orande";
 ctx2.fillRect(50, 50, 100, 100);

 ctx2.transform(1, 0.4, -0.4, 1, 30, 11);
 ctx2.fillStyle = "orange";
 ctx2.fillRect(300, 50, 50, 80);

 let trans = ctx1.getTransform();
 console.log(trans);
 ctx2.transform(trans);
 ctx2.beginPath();
 ctx2.arc(100, 150, 100, 0, 2 * Math.PI);
 ctx2.fill();

 return;

 };

</script>

<canvas width="100" height="100"></canvas><canvas width="100" height="100"></canvas>

Opis:
Metoda CanvasRenderingContext2D.transform() mnoży bieżącą transformację przez macierz opisane argumentami tej metody. Umożliwia to skalowanie, obracanie i przesunięcie i pochylenie kontekstu. Zobacz także setTransform() metoda, która resetuje bieżącą transformację do macierzy tożsamości, a następnie wywołuje transform(). Parametry setTransform() - ma dwa typy parametrów, które może zaakceptować. Starszy typ składa się z kilku parametrów reprezentujących poszczególne komponenty macierz transformacji do ustawienia: a (m11) - komórka w pierwszym wierszu i pierwszej kolumnie macierzy, b (m12) - komórka w drugim wierszu i pierwszej kolumnie macierzy, c (m21) - komórka w pierwszym wierszu i drugiej kolumnie macierzy, d (m22) - komórka w drugim wierszu i drugiej kolumnie macierzy, e (m41) - komórka w pierwszym wierszu i trzeciej kolumnie macierzy, f (m42) - komórka w drugim wierszu i trzeciej kolumnie macierzy, Alternatywnie możesz przekazać pojedynczy parametr będący obiektem zawierającym powyższe wartości jako właściwości. Nazwy parametrów są kluczami właściwości i jeśli występują dwie nazwy synonimiczne np. m11 i a, muszą mieć tę samą wartość liczbową lub < /span>, a pozostałe domyślnie domyślnie mają wartość i TypeError zostanie rzucony. Użycie formy obiektowej pozwala na pominięcie niektórych parametrów a d 1 0. Jeśli punkt pierwotnie miał współrzędne X, y, to po przekształceniu będzie miał współrzędne AX + Cy + mi, BX + Dy + F. To znaczy e i f kontrolują poziome i pionowe przenoszenie kontekstu. Kiedy b i c są 0, a i d kontroluj poziome i pionowe skalowanie kontekstu. Kiedy a i d są 1, b i c kontroluj poziome i pionowe pochylenie kontekstu. Wartość zwracana undefined.

Wartości parametrów:

a - oznacza skalowanie poziome
b - oznacza przechylenie poziome
c - oznacza pochylenie pionowe
d - oznacza skalowanie pionowe
e - oznacza ruch poziomy
f - oznacza ruch w pionie

Zobacz też:
setTransform() -