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

CanvasRenderingContext2D.scale()

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

scale(x, y)

Przykłady:

<script>

 window.onload = () => {

 const szer = 600;
 const wys = 600;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");

 ctx.scale(5, 10);
 ctx.fillStyle = "orange";
 ctx.translate(-20, -10);
 ctx.fillRect(20, 10, 10, 20);

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

 ctx.fillStyle = "blue";
 ctx.fillRect(10, 10, 10, 10);
 
 ctx.font = "50px serif";
 
 ctx.scale(1, 1);
 ctx.fillText("Witaj!", 300, 50);
 ctx.setTransform(1, 0, 0, 1, 0, 0);
 
 ctx.scale(-1, 1);
 ctx.fillText("Witaj!", -300, 150);
 ctx.setTransform(1, 0, 0, 1, 0, 0);
 
 ctx.scale(-1, -1);
 ctx.fillText("Witaj!", -300, -300);
 ctx.setTransform(1, 0, 0, 1, 0, 0);

 return;

 };

</script>

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

Opis:
Metoda CanvasRenderingContext2D.scale() dodaje transformację skalowania do jednostek obszaru roboczego poziomo i/lub pionowo. Domyślnie jedna jednostka na płótnie to dokładnie jeden piksel. Transformacja skalowania modyfikuje to zachowanie. Na przykład współczynnik skalowania wynoszący 0,5 daje w wyniku rozmiar jednostki wynoszący 0,5 piksela; kształty są zatem rysowane w połowie normalnego rozmiaru. Podobnie współczynnik skalowania wartość 2,0 zwiększa rozmiar jednostki, tak że jedna jednostka staje się dwoma pikselami; kształty są takie narysowany w dwukrotnie większym rozmiarze. Parametry x - współczynnik skalowania w kierunku poziomym. Wartość ujemna odwraca piksele w poprzek Oś pionowa. Wartość 1 powoduje brak skalowania poziomego, y - współczynnik skalowania w kierunku pionowym. Wartość ujemna odwraca piksele w poprzek pozioma oś. Wartość 1 powoduje brak skalowania w pionie. Wartość zwracana undefined.

Zobacz też: