Rysowanie gradientów na kanwie

W rozdziale:

Gradienty

	IE	Firefox	Safari	Chrome	Opera	iPhone	Android
gradienty liniowe	7.0+^*	3.0+	3.0+	3.0+	10.0+	1.0+	1.0+
gradienty promieniste	9.0+	3.0+	3.0+	3.0+	10.0+	1.0+	1.0+
* Internet Explorer 7 i 8 wymagają dodatku zewnętrznej biblioteki explorercanvas. Internet Explorer 9 standardowo obsługuje gradienty w elemencie `<canvas>`.

W poprzednich częściach tego rozdziału nauczyłeś się rysować prostokąty wypełnione jednolitym kolorem oraz jednokolorowe linie. Ale to nie znaczy, że kolory zawsze muszą być jednolite. Zamiast nich można też tworzyć gradienty. Spójrzmy na przykład.

Kod HTML to zwykły element kanwy.

<canvas id="d" width="300" height="225"></canvas>

Najpierw musimy znaleźć interesujący nas element <canvas> i podpiąć się do jego kontekstu rysunkowego.

var d_canvas = document.getElementById("d");
var context = d_canvas.getContext("2d");

Mając kontekst rysunkowy możemy rozpocząć rysowanie gradientu. Gradient to płynne przejście między dwoma lub większą liczbą kolorów. Kontekst rysunku kanwy obsługuje dwa rodzaje gradientów:

createLinearGradient(x0, y0, x1, y1): rysuje gradient wzdłuż linii łączącej punkty (x0, y0) i (x1, y1).
createRadialGradient(x0, y0, r0, x1, y1, r1): rysuje gradient w kształcie stożka łączący dwa okręgi. Trzy pierwsze parametry definiują okrąg wyznaczający początek gradientu, ze środkiem w punkcie (x0, y0) i o promieniu r0. Trzy ostatnie parametry definiują okrąg wyznaczający koniec gradientu, ze środkiem w punkcie (x1, y1) i o promieniu r1.

Narysujemy gradient liniowy. Gradient może mieć dowolny rozmiar, a w tym przykładzie narysujemy gradient o szerokości 300 pikseli, czyli takiej samej, jak kanwa.

Utworzenie obiektu gradientu

var my_gradient = context.createLinearGradient(0, 0, 300, 0);

Jako że wartości y (drugi i czwarty parametr) mają wartość 0, ten gradient będzie się jednolicie rozkładał od lewej do prawej.

Mając obiekt gradientu można definiować jego kolory. Każdy gradient ma przynajmniej dwa stopnie kolorów. Stopnie te można umieszczać w dowolnych miejscach. Aby dodać stopień koloru, należy określić jego położenie na gradiencie. Położenie na gradiencie można definiować przy użyciu wartości z przedziału od 0 do 1.

Zdefiniujemy gradient przechodzący od czerni do bieli.

my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");

Samo zdefiniowanie gradientu nie powoduje narysowania czegokolwiek na kanwie. Jest to tylko obiekt zapisany gdzieś w pamięci. Aby narysować gradient, trzeba ustawić na niego własność fillStyle oraz narysować jakąś figurę, np. prostokąt albo linię.

Własność fillStyle jest gradientem

context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

Otrzymujemy taki wynik:

Powiedzmy, że chcemy aby gradient biegł z góry na dół. Przy tworzeniu obiektu takiego gradientu należy wartości x (pierwszy i trzeci parametr) pozostawić niezmienne, a wartości y (drugi i czwarty parametr) zmienić w zakresie od 0 do wysokości kanwy.

Wartości x wynoszą 0, wartości y zmieniają się

var my_gradient = context.createLinearGradient(0, 0, 0, 225);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

Otrzymujemy taki wynik:

Można też tworzyć gradienty biegnące po skosie.

Zmieniają się wartości x i y

var my_gradient = context.createLinearGradient(0, 0, 300, 225);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

Otrzymujemy taki wynik: