Gradiente radiale – Programmare con Javascript

I gradienti sono dei modelli di colore da assegnare a fillStyle() e/o strokeStyle() prima di utilizzare le funzioni grafiche

lg=createRadialGradient(x0,y0,r0, x1,y1,r1), piuttosto complicato…
lg.addColorStop(p, colore), aggiunge una per una le posizioni, da 0 a 1 (relative…), dove cambiare colore

Cambia il raggio interno oppure il raggio esterno per spostare la posizione del primo o dell’ultimo colore

cs=document.getElementById("canvas1");

w=cs.width;

h=cs.height;

w2=w/2;

h2=h/2;

//--------------------------------------------

g2d=cs.getContext("2d");

x0=w2;

y0=h2;

r0=0;

x1=w2;

y1=h2;

r1=100;

rg=g2d.createRadialGradient(x0,y0,r0, x1,y1,r1);

rg.addColorStop(0 , "white");

rg.addColorStop(0.5, "black");

rg.addColorStop(1 , "white");

g2d.fillStyle=rg;

g2d.fillRect(0,0,w,h);

...

cs=document.getElementById("canvas2");

...

r0=50;

r1=100;

...

cs=document.getElementById("canvas3");

r0=0;

r1=50;

...

</script>

Con i colori

...

rg.addColorStop(0 , "red");

rg.addColorStop(0.5, "green");

rg.addColorStop(1 , "blue");

...