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

CanvasRenderingContext2D.translate()

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

translate(x, y)

Przykłady:

<script>

 window.onload = () => {

 const szer = 600;
 const wys = 400;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");
 
 ctx.translate(250, 250);
 ctx.fillStyle = "blue";
 ctx.fillRect(0, -250, 100, 100);

 ctx.setTransform(1, 0, 0, 1, 0, 0);

 ctx.fillStyle = "green";
 ctx.fillRect(0, 0, 100, 100);

 return;

 };

</script>

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

Opis:
Metoda CanvasRenderingContext2D.translate() dodaje transformację translacji do bieżącej macierzy. Metoda translate() dodaje do bieżącego przekształcenie translacyjne matrix przesuwając płótno i jego początek x jednostek w poziomie i y jednostki pionowo na siatce. Parametry x - odległość do przesunięcia w kierunku poziomym. Wartości dodatnie znajdują się po prawej stronie i negatywny w lewo, y - odległość ruchu w kierunku pionowym. Wartości dodatnie spadają, a ujemne wstały. Wartość zwracana undefined.

Zobacz też: