HTML- doekgradiënte
Canvas - Gradiënte
Gradiënte kan gebruik word om reghoeke, sirkels, lyne, teks, ens te vul. Vorms op die doek is nie beperk tot soliede kleure nie.
Daar is twee verskillende tipes gradiënte:
- createLinearGradient( x,y,x1,y1 ) - skep 'n lineêre gradiënt
- createRadialGradient( x,y,r,x1,y1,r1 ) - skep 'n radiale/sirkulêre gradiënt
Sodra ons 'n gradiëntvoorwerp het, moet ons twee of meer kleurstoppe byvoeg.
Die addColorStop()-metode spesifiseer die kleurstoppe en sy posisie langs die gradiënt. Gradiëntposisies kan enige plek tussen 0 tot 1 wees.
Om die gradiënt te gebruik, stel die fillStyle of strokeStyle-eienskap op die gradiënt, en teken dan die vorm (reghoek, teks of 'n lyn).
Gebruik createLinearGradient()
Voorbeeld
Skep 'n lineêre gradiënt. Vul reghoek met die gradiënt:
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);
Gebruik createRadialGradient():
Voorbeeld
Skep 'n radiale/sirkelvormige gradiënt. Vul reghoek met die gradiënt:
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);