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

CanvasRenderingContext2D.getTransform()

[_] [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]

getTransform()

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.setTransform(1, 0.5, 0.6, 1, 10, 10);
 ctx1.fillRect(0, 0, 50, 50);

 ctx1.fillStyle = "yellow";
 ctx1.fillRect(200, 50, 200, 80)
 ctx1.setTransform(1, -0.5, -0.5, 1, 200, 50);

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

 ctx2.setTransform(1, 0.5, -0.5, 1, 30, 10);
 ctx2.fillStyle = "red";
 ctx2.fillRect(300, 50, 50, 80);

 let trans = ctx1.getTransform();
 console.log(trans);
 ctx2.setTransform(trans);
 ctx2.beginPath();
 ctx2.arc(150, 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.getTransform() pobiera bieżącą macierz transformacji zastosowaną do kontekstu. Wartość zwracana obiekt DOMMatrix. Metoda .setTransform(a, b, c, d, e, f); skaluje, obraca, przesuwa i pochyla kontekst. 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ż:
DOMMatrix -