HTML-canvas verlopen
Canvas - Verlopen
Verlopen kunnen worden gebruikt om rechthoeken, cirkels, lijnen, tekst, enz. te vullen. Vormen op het canvas zijn niet beperkt tot effen kleuren.
Er zijn twee verschillende soorten gradiënten:
- createLinearGradient( x,y,x1,y1 ) - maakt een lineair verloop
- createRadialGradient( x,y,r,x1,y1,r1 ) - maakt een radiaal/cirkelvormig verloop
Zodra we een verloopobject hebben, moeten we twee of meer kleurstops toevoegen.
De methode addColorStop() specificeert de kleurstops en de positie ervan langs het verloop. Gradiëntposities kunnen overal tussen 0 en 1 zijn.
Als u het verloop wilt gebruiken, stelt u de eigenschap fillStyle of strokeStyle in op het verloop en tekent u vervolgens de vorm (rechthoek, tekst of lijn).
CreateLinearGradient() gebruiken
Voorbeeld
Maak een lineair verloop. Vul rechthoek met het verloop:
javascript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
CreateRadialGradient() gebruiken:
Voorbeeld
Maak een radiaal/cirkelvormig verloop. Vul rechthoek met het verloop:
javascript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);