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

CanvasRenderingContext2D.createRadialGradient()

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

createRadialGradient(x0, y0, r0, x1, y1, r1)

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.createRadialGradient(10, 10, 100, 10, 10, 600);

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

 ctx.fillStyle = gradient;
 ctx.fillRect(0, 0, 550, 450);

 };

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

Opis:
Metoda CanvasRenderingContext2D.createRadialGradient() tworzy gradient promieniowy przy użyciu rozmiaru i współrzędnych dwóch okręgów. Ta metoda zwraca 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 okręgu początkowego, y0 - współrzędna osi Y okręgu początkowego, r0 - promień okręgu początkowego, musi być nieujemna i skończona, x1 - współrzędna osi X okręgu końcowego, y1 - współrzędna osi Y okręgu końcowego, r1 - promień okręgu końcowego, musi być nieujemna i skończona. Wartość zwracana promieniowy CanvasGradient. Wyjątki NotSupportedError DOMException zgłaszany, gdy w parametrze przekazywane są nieskończone wartości, IndexSizeError DOMException zgłaszany po przekazaniu ujemnego promienia w parametrze.

Zobacz też:
CanvasGradient -
fillStyle -
strokeStyle -