HOME

Contatti

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS


8a - Colori e gradienti

Precedente - Indice guida canvas - Successivo


A
rgomenti correlati:

RICHIAMO DI METODI

I nomi dei colori

Hanno un nome i sedici colori di base:
black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua.
In tutto, i colori con il nome erano 128, e li abbiamo presentati, completi di codice, nel paragrafo, abbastanza datato in verità TUTTI I COLORI CON IL NOME.
In seguito sono stati aggiunti almeno un centinaio di nomi, però non tutti sono realmente visibili nel canvas. Per questo motivo consigliamo di utilizzare il codice.
Ecco la lista: Color names


Codice RGB (Red, Green, Blue)

Il colore va espresso secondo le tre componenti rossa, verde e azzurra, ognuna delle quali varia fra 0 e 255.

ESEMPI

Disegnare un contorno nero:
ctx.strokeStyle = "rgb(0,0,0)"

Disegnare un contorno bianco:
ctx.strokeStyle = "rgb(255,255,255)"

Disegnare un contorno bianco:
ctx.strokeStyle = "rgb(255,255,255)"

Disegnare un contorno ciano:
ctx.strokeStyle = "rgb(0,255,255)"

E così via per tutti i colori: in tutto ci sono
256 × 256 × 256 = 16777216 colori!


Codice RGBA (Red, Green, Blue, Alfa)

Si tratta di un'estensione del modello RGB: oltre alle tre componenti rossa, verde e azzurra, si aggiunge un canale alfa, che esprime l'opacità del colore stesso,

0 ≤ α ≤ 1

Se α = 0 l'opacità del colore è nulla, e dunque esso è completamente trasparente, cioè invisibile; se invece α = 1 l'opacità è massima, e dunque la trasparenza è nulla.

ESEMPIO DI CODICE

canvas.fillStyle="rgba(0,0,255,0.45)";

NOTA

La trasparenza risente anche del colore di sfondo. Ad esempio, nella seguente immagine, vediamo la stessa trasparenza dell'immagine in alto ma su sfondo nero.

Questo è su sfondo di codice #ffcc99


Codice Esadecimale (#rrggbb)

Le tre componenti rosso, verde e blu, trasformate in esadecimale, vengono inserite, senza spazi, in una stringa che inizia con il simbolo #. Tale codice era l'unico possibile nel linguaggio HTML prima dell'avvento dei CSS.

Approfondimenti
codice esadecimale dei colori
cambiamento di base



Un gradiente lineare è un insieme di colori che variano in modo lineare in un certo intervallo.
La transizione avviene fra i colori iniziale e finale.
Per ottenerlo occorre usare insieme i metodi

createLinearGradient(x0,y0,x1,y1)
in cui
x0 è l'ascissa del punto iniziale del gradiente;
y0 è l'ordinata del punto iniziale del gradiente;
x1 è l'ascissa del punto finale del gradiente;
y1 è l'ordinata del punto finale del gradiente.
addColorStop(stop,colore)
in cui
stop è un valore compreso fra 0.0 e 1.0 che rappresenta una posizione fra i valori iniziale e finale del gradiente;
colore è il colore da visualizzare nella posizione stop.

I colori sono distribuiti perpendicolarmente alla direzione del segmento e secondo la lunghezza di questo.

ESEMPIO 1

var grd=ctx.createLinearGradient(25,25,175,25);
grd.addColorStop(0,"rgba(0,255,0,1)");
grd.addColorStop(1,"rgba(0,0,255,1)");
ctx.fillStyle=grd;
ctx.beginPath();
ctx.arc(100,75,70,0,2*Math.PI);
ctx.fill()

Abbiamo riportato in alto il vettore che ha per estremi rispettivamente il punto iniziale e finale inseriti in createLinearGradient.
Il colore varia orizzontalmente dal verde (primo grd.addColorStop) all'azzurro (secondo grd.addColorStop).

ESEMPIO 2

var grd=ctx.createLinearGradient(25,25,175,25);
grd.addColorStop(0,"rgba(0,0,255,0.3)");
grd.addColorStop(1,"rgba(0,0,255,1)");
ctx.fillStyle=grd;
ctx.beginPath();
ctx.arc(100,75,70,0,2*Math.PI);
ctx.fill()

In questo caso non variano i colori, ma la trasparenza (da 0.3 a 1).
Notate come il createLinearGradient sia lo stesso.

ESEMPIO 3

var grd=ctx.createLinearGradient(25,25,175,25);
grd.addColorStop("0","rgba(255,0,0,0.75)");
grd.addColorStop("0.25","rgba(255,255,0,0.75)");
grd.addColorStop("0.5","rgba(0,255,0,0.75)");
grd.addColorStop("0.75","rgba(0,0,255,0.75)");
grd.addColorStop(1,"rgba(255,0,255,0.75)");
ctx.fillStyle=grd;
ctx.fillRect(25,25,150,100);

In questo caso abbiamo inserito cinque addColorStop, con i cinque colori primari: rosso, giallo, verde, blu, violetto, come distinti originariamente da Isaac Newton. Ognuno di essi occupa un'uguale porzione del rettangolo.
Noterete che le parti, ad esempio "0.25", "0.5" etc., sono inserite fra virgolette.

ESEMPIO 4

var grd=ctx.createLinearGradient(25,25,25,125);
grd.addColorStop("0","rgba(255,0,0,0.75)");
grd.addColorStop("0.25","rgba(255,255,0,0.75)");
grd.addColorStop("0.5","rgba(0,255,0,0.75)");
grd.addColorStop("0.75","rgba(0,0,255,0.75)");
grd.addColorStop(1,"rgba(255,0,255,0.75)");
ctx.fillStyle=grd;
ctx.fillRect(25,25,150,100);

Gli stessi colori dell'esempio precedente, ma questa volta il gradiente varia in verticale, da (25,25) a (25,125).

ESEMPIO 5

var grd=ctx.createLinearGradient(25,25,175,125);
grd.addColorStop("0","green");
grd.addColorStop("0.5","yellow");
grd.addColorStop("1","red");
ctx.fillStyle=grd;
ctx.fillRect(25,25,150,100);

Ecco ora una variazione in diagonale, con tre colori.


Si può, ovviamente, inserire diversi gradienti, in tutti i casi in cui si usano i metodi fill() o stroke().
Nell'esempio che segue abbiamo usato due gradienti, rispettivamente assegnati alle variabili grd e grd1, che servono, rispettivamente, per colorare il riempimento e il contorno del testo.

ESEMPIO 6

var grd1=ctx.createLinearGradient(20,20,270,120);
grd1.addColorStop("0","red");
grd1.addColorStop("0.5","yellow");
grd1.addColorStop("1","green");
ctx.fillStyle=grd1;
var grd=ctx.createLinearGradient(20,20,270,125);
grd.addColorStop("0","green");
grd.addColorStop("0.5","darkorange");
grd.addColorStop("1","red");
ctx.strokeStyle=grd;
ctx.font='36px solid thaoma'
ctx.fillText('ARCOBALENO',20,50);
ctx.fillText('DI COLORI',20,100);
ctx.strokeText('ARCOBALENO',20,50);
ctx.strokeText('DI COLORI',20,100);


NOTA BENE - Per usare il metodo dovremo innanzitutto inserire e dichiarare una canvas

Immaginiamo di averla inserita con il seguente codice:

<canvas id="Lavagna" width="150" height="100"> Il tuo browser non supporta il tag HTML5 canvas. </canvas>

 

Troverete un esempio completo, con possibilità di operare tutti i cambiamenti desiderati, nella sezione

PROVA TU - GRADIENTE LINEARE

 


 

Precedente - Successivo

IN EVIDENZA DAL SITO

 







CALCOLATRICE
SCIENTIFICA



CON SPIEGAZIONI
ED ESEMPI

 




TARTAMONDO - PER BAMBINI




AREA GIOCHI

 

 

 

 

 


www.tommasobientinesi.it

La passione per i viaggi e la natura nel nuovo sito di Tommaso Bientinesi




 


Guida a matematica con javascript: indice  -  Guida al tag HTML5 canvas: Indice guida canvas