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

CanvasRenderingContext2D.createConicGradient()

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

createConicGradient(startAngle, x, y)

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");
 
 // Utwórz gradient stożkowy
 // Kąt początkowy wynosi 0
 // Pozycja środkowa to 100, 100
 const gradient = ctx.createConicGradient(0, 225, 225);

 // Dodaj pięć przystanków koloru
 gradient.addColorStop(0, "blue");
 gradient.addColorStop(0.25, "yellow");
 gradient.addColorStop(0.5, "red");
 gradient.addColorStop(0.75, "orange");
 gradient.addColorStop(1, "green");

 ctx.fillStyle = gradient;
 ctx.fillRect(50, 50, 350, 350);

 const gradient2 = ctx.createConicGradient(0, 500, 400);

 gradient2.addColorStop(0, "orange");
 gradient2.addColorStop(0.5, "yellow");
 gradient2.addColorStop(1, "green");
 ctx.fillStyle = gradient2;
 ctx.fillRect(450, 350, 100, 100);

 };

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

Opis:
Metoda CanvasRenderingContext2D.createConicGradient() tworzy gradient wokół punktu o podanych współrzędnych. Ta metoda zwraca wartość stożkową 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 startAngle - kąt, pod którym rozpoczyna się gradient, w radianach. Kąt zaczyna się od linii biegnącej poziomo w prawo od środka i postępuje zgodnie z ruchem wskazówek zegara, x - współrzędna osi x środka gradientu, y - współrzędna osi Y środka gradientu.

Zobacz też:
CanvasGradient - Interfejs
fillStyle -
CanvasGradient.addColorStop() - 
strokeStyle -