HTML Canvas toning

Canvas - Gradienter

Gradienter kan användas för att fylla rektanglar, cirklar, linjer, text och mer. Formerna på canvas är inte begränsade till enfärgade.

Det finns två olika typer av gradienter:

• createLinearGradient(x,y,x1,y1) - Skapa linjär gradient
• createRadialGradient(x,y,r,x1,y1,r1) - Skapa radial/cirkulär gradient

När vi har gradientobjektet måste vi lägga till två eller fler färgstämplar.

addColorStop() metoden specificerar färgens stoppunkter och deras position längs gradienten. Gradientens position kan vara någon position mellan 0 och 1.

För att använda gradienter, sätt fillStyle eller strokeStyle egenskapen till gradienten och rit ut former (rektangel, text eller linje).

Använd createLinearGradient()

Exempel

Skapa linjär gradient. Fyll rektangel med gradient:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建渐变
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 用渐变填充
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Prova själv

Använd createRadialGradient():

Exempel

Skapa radial/cirkulär gradient. Fyll rektangel med gradient:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建渐变
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 用渐变填充
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Prova själv

Se också:

Komplett Canvas referens manual för CodeW3C.com