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
Esempi
Cambia il raggio interno oppure il raggio esterno per spostare la posizione del primo o dell’ultimo colore
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<canvas id="canvas1" style="border: 1px solid;" width="300" height="200"></canvas> <canvas id="canvas2" style="border: 1px solid;" width="300" height="200"></canvas> <canvas id="canvas3" style="border: 1px solid;" width="300" height="200"></canvas> <script> 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
1 2 3 4 5 |
... rg.addColorStop(0 , "red"); rg.addColorStop(0.5, "green"); rg.addColorStop(1 , "blue"); ... |