HTML Canvas gradation

Canvas - Gradienter

Gradienter kan bruges til at fylde rektangler, cirkler, linjer, tekst osv. former på canvas er ikke begrænsede til ensfarvede.

Der er to forskellige typer gradienter:

• createLinearGradient(x,y,x1,y1) - Opret lineær gradient
• createRadialGradient(x,y,r,x1,y1,r1) - Opret radial/cirkulær gradient

Når vi har en gradientobjekt, skal vi tilføje to eller flere farvestop.

addColorStop() metoden definerer farvestop og deres position langs gradienten. Gradientposition kan være en vilkårlig position mellem 0 og 1.

For at bruge en gradient skal du sætte fillStyle eller strokeStyle-attribut til en gradient og derefter tegne et形状（矩形、文本或线条）。

Brug af createLinearGradient()

Eksempel

Opret en lineær gradient. Fyld rektangel med gradient:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Opret gradient
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Brug af gradient til at fylde
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Prøv det selv

Brug af createRadialGradient():

Eksempel

Opret en radial/cirkulær gradient. Fyld rektangel med gradient:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Opret gradient
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Brug af gradient til at fylde
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Prøv det selv

Se også:

Komplet Canvas reference manual på CodeW3C.com