colori e gradiente con canvas e javascript

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 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 creando una sfumatura.
La transizione avviene fra i colori iniziale e finale.
Per ottenerlo occorre usare insieme i metodi

createLinearGradient(x₀,y₀,x₁,y₁): in cui
x₀ è l'ascissa del punto iniziale del gradiente;
y₀ è l'ordinata del punto iniziale del gradiente;
x₁ è l'ascissa del punto finale del gradiente;
y₁ è 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);