HTML Canvas Verloop

Canvas - Verlopen

Verlopen kunnen worden gebruikt om rechthoeken, cirkels, lijnen, tekst enz. te vullen. Vormen op het canvas zijn niet beperkt tot eenvoudige kleuren.

Er zijn twee verschillende soorten verlopen:

  • createLinearGradient(x,y,x1,y1) - Maak een lineair verloop aan
  • createRadialGradient(x,y,r,x1,y1,r1) - Maak een radiaal/cirkelverloop

Zodra we een verloopobject hebben, moeten we twee of meer kleurpunten toevoegen.

De addColorStop() methode specificeert de stoppunten van de kleur en hun positie langs het verloop. De verlooppositie kan een willekeurige positie tussen 0 en 1 zijn.

Om een verloop te gebruiken, stel de fillStyle of strokeStyle eigenschap in op een verloop en teken een vorm (rechthoek, tekst of lijn).

Canvas - Verlopen

Gebruik createLinearGradient()

Voorbeeld

Maak een lineair verloop aan. Vul een rechthoek met een verloop:

Uw browser ondersteunt de HTML5 canvas tag niet.

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Maak een verloop aan
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "rood");
grd.addColorStop(1, "wit");
// Gebruik een verloop om te vullen
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Probeer het zelf uit

Gebruik createRadialGradient():

Voorbeeld

Maak een radiaal/cirkelverloop. Vul een rechthoek met een verloop:

Uw browser ondersteunt de HTML5 canvas tag niet.

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Maak een verloop aan
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "rood");
grd.addColorStop(1, "wit");
// Gebruik een verloop om te vullen
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Probeer het zelf uit

Zie ook:

Volledige Canvas Referentiemanual van CodeW3C.com