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

CanvasRenderingContext2D.createLinearGradient()

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

createLinearGradient(x0, y0, x1, y1)

Przykłady:

<script>

 window.onload = () => {
 
 const szer = 600;
 const wys = 500;
 
 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");
 
 const gradient = ctx.createLinearGradient(50, 50, 500, 400);

 gradient.addColorStop(0, "yellow");
 gradient.addColorStop(0.5, "green");
 gradient.addColorStop(1, "blue");

 ctx.fillStyle = gradient;
 ctx.fillRect(50, 50, 500, 400);

 };

</script>
 
<canvas id="canvas" width="1" height="1"></canvas>

Opis:
Metoda CanvasRenderingContext2D.createLinearGradient() tworzy gradient wzdłuż linii łączącej dwie dane współrzędne. Ta metoda zwraca liniowy plik CanvasGradient. Aby zastosować gradient do kształtu, należy najpierw przypisać go do właściwości fillStyle lub strokeStyle. Współrzędne gradientu są globalne, odnoszą się do aktualnej przestrzeni współrzędnych. Po zastosowaniu do kształtu współrzędne nie są powiązane ze współrzędnymi kształtu. Parametry x0 - współrzędna osi x punktu początkowego, y0 - współrzędna osi Y punktu początkowego, x1 - współrzędna osi x punktu końcowego, y1 - współrzędna osi Y punktu końcowego. Wartość zwracana to liniowy CanvasGradient zainicjowany określoną linią. Zgłaszane wyjątki NotSupportedError DOMException, gdy jako parametry przekazywane są nieskończone wartości.

Zobacz też:
CanvasGradient -
fillStyle -
strokeStyle -