[ Leksykon ] [ JavaScript ] [ Metody ] [ canvas ] [ CanvasGradient() ]

CanvasGradient.addColorStop()

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

addColorStop(offset, color)

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");
 
 // 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, "red");
 gradient.addColorStop(0.24, "yellow");
 gradient.addColorStop(0.4, "green");
 gradient.addColorStop(0.55, "blue");
 gradient.addColorStop(1, "orange");

 // Set the fill style and draw a rectangle
 ctx.fillStyle = gradient;
 ctx.fillRect(50, 50, 340, 340);

 const gradient2 = ctx.createConicGradient(0, 480, 390);

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

};

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

Opis:
Metoda CanvasGradient.addColorStop() dodaje nowy stopień koloru, zdefiniowany przez offseta i color, do danego gradientu płótna. Parametry offset - liczba od 0 a 1, reprezentująca pozycję przejścia koloru. 0 reprezentuje początek gradientu i 1 reprezentuje koniec. color - wartość CSS <color> reprezentująca kolor. Wartość zwracana undefined. Wyjątki IndexSizeError DOMException - zgłaszany, jeśli offset wartość nie mieści się w przedziale od 0 do 1. SyntaxError DOMException - zgłaszany, jeśli color nie można przeanalizować jako <color> wartości CSS. .

Zobacz też:
canvas createConicGradient() - Tworzy gradient stożkowy wokół punktu określonego przez współrzędne
canvas createLinearGradient() - Tworzy gradient liniowy wzdłuż linii określonej przez współrzędne
canvas createRadialGradient() - Tworzy gradient promieniowy określony przez współrzędne dwóch okręgów
canvas fillStyle - Kolor lub styl wypełnienia do wykorzystania wewnątrz kształtów, domyślny #000 czarny
canvas strokeStyle - Kolor lub styl linii obrysu wokół kształtów, domyślny #000 czarny