Przejścia HTML Canvas

Canvas - Stopnie przejścia

Stopnie przejścia można używać do wypełniania prostokątów, okręgów, linii, tekstu itp. Kształty na płótnie nie są ograniczone do jednolitych kolorów.

Istnieją dwa różne typy stopni przejścia:

• createLinearGradient(x,y,x1,y1) - Utwórz stopień przejścia liniowego
• createRadialGradient(x,y,r,x1,y1,r1) - Utwórz promienisty/kolisty stopień przejścia

Gdy mamy obiekt stopnia przejścia, musimy dodać dwa lub więcej znaczników kolorów.

Metoda addColorStop() określa punkt zatrzymania koloru oraz jego pozycję w stopniu przejścia. Pozycja przejścia może być dowolnym miejscem między 0 a 1.

Aby użyć stopnia przejścia, ustaw atrybut fillStyle lub strokeStyle na stopień przejścia, a następnie narysuj kształt (prostokąt, tekst lub linia).

Użyj createLinearGradient()

Przykład

Utwórz stopień przejścia liniowego. Wypełnij prostokąt stopniem przejścia:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Utwórz stopień przejścia
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Użyj stopnia przejścia
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Spróbuj sam

Użyj createRadialGradient():

Przykład

Utwórz promienisty/kolisty stopień przejścia. Wypełnij prostokąt stopniem przejścia:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Utwórz stopień przejścia
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Użyj stopnia przejścia
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Spróbuj sam

Inne zasoby:

Pełne podręcznik Canvas CodeW3C.com