Canvas Javascript: Come aggiungere lo stile alle figure geometriche

Come aggiungere con il canvas lo stile alle linee e alle figure geomtriche.

In questi due articoli abbiamo creato delle figure piane, ma di default lo stile era abbastanza triste e monotono. Oggi finalemente gli daremo una sferzata di style.

Per aggiungere gli stili alle figure dobbiamo mettere i metodi dello stile prima della funzione che renderizza i punti o la figura creata.

Lo stile influenzerà tutte le figure sottostanti finchè non gli verrà cambiato lo stesso stile.

Vediamo il suo funzionamento partendo dai colori.

COLORI

Per dare il colore ci sono due metodi, uno per le figure e uno linee.

• ctx.fillStyle = colore;
  Colora il riempimento, l'area delle figure geometriche, si utilizza prima di fill()

• ctx.strokeStyle = colore;
  Colora le linee e il perimetro delle figure, si utilizza prima di stroke()

Tutti e due prendono una stringa con il nome del colore che può essere espressa come con il css:

• Parola chiave: le parole che identificano il colore ('red', 'black', 'green', 'blanchedalmond', ... lista colori
• Codice Esadecimale: #FF0000, #000000, #008000, #FFEBCD
• Colore rgb: che somma tra loro tre tonalità di colore: il rosso, verde e blue. rgb(255, 87, 71), questo colora di arancione.
• Colore rgba: uguale al rbg ma con in più il cananle della trasparenza, che prende come valore un numero da 0 a 1, dove 0.0 è la massima trasparenza mentre 1.0 è la minima.

ctx.fillStyle = "orange";
ctx.fillRect(50,50, 100, 50)
ctx.strokeStyle = "#FF0000";
ctx.strokeRect(50,50, 100, 50)

ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(300, 50);
ctx.lineTo(300, 150);
ctx.lineTo(200, 50);
ctx.stroke();

Il secondo tracciato non ha uno stile proprio ma prende l'ultimo stile che è stato usato, ctx.strokeStyle = "#FF0000", quindi risulterà di colore rosso.

ctx.beginPath();
ctx.arc(100, 250, 50, 0, 2 * Math.PI);
ctx.strokeStyle = 'rgb(60, 60, 60)';
ctx.stroke(); 

ctx.beginPath();
ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.arc(250, 250, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgba(106, 90, 205, 0.5)';
ctx.arc(300, 250, 50, 0, 2 * Math.PI);
ctx.fill();

L'ultimo cerchio ha una trasparenza del 50% e si sovrappone al altro cerchio.

STILE LINEE

Passiamo in rassegna alcune degli stili più importanti (per me), riguardanti le linee e i contorni.

Come si vede dagli esempi precedenti abbiamo già usato uno stile per le linee, il metodo strokeStyle, che assegna un colore, ma è poco visibile perchè di default la gradezza è di 1px. Grazie al metodo lineWidth possiamo gestirne la larghezza.

• lineWidth = valore il metodo che assegna la larghezza della linea in base al valore scelto.

ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo(50, 5);
ctx.lineTo(50, 140);
ctx.stroke();

Adesso che abbiamo una linea più spessa possiamo decidere come dovra finire, se quadrata o arrotondata, il metodo da usare è

• lineCap = 'butt' || 'round' || 'square'

prende come valore una delle tre parole chiave:

• butt è di default e finisce con la punta quadrata
• round fa finire con una punta arrotondata
• square finisce con una punta quadrata come butt, ma esce dalla fine della linea per una lunghezza la metà della larghezza della stessa. Ad esempio se la linea ha una larghezza di 10, con l'opzione 'square' la punta sborderà di 5.

ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = 'round';
ctx.moveTo(50, 20);
ctx.lineTo(50, 160);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 20;
ctx.lineCap = 'square';
ctx.moveTo(80, 20);
ctx.lineTo(80, 160);
ctx.stroke();

Invece se volessimo modificare la congiunzione tra due linee in modo che finiscano arrotondate, troncate o a punta, dobbiamo usare il metodo:

• lineJoin = 'round' || 'bevel' || 'miter'
  e anche questo metodo prende tre opzioni:

• round la congiunzione tra le linee viene arrotondata

• bevel tronca la congiunzione appiattendola

• miter è l'opzione di default e la congiunzione è appuntita
  

ctx.beginPath();
ctx.strokeStyle = '#000';
ctx.lineJoin = 'round';
ctx.lineWidth = 20;
ctx.moveTo(150, 80);
ctx.lineTo(200, 50);
ctx.lineTo(250, 80);
ctx.stroke();

ctx.beginPath();
ctx.lineJoin = 'bevel';
ctx.moveTo(150, 120);
ctx.lineTo(200, 90);
ctx.lineTo(250, 120);
ctx.stroke();

LINEE TRATTEGGIATE

Per disegnare delle linee tratteggiate esiste una funzione se messa prima della linea o del perimentro, le crea facilemente.

• setLineDash([lunghezzaDelTratteggio, distanza]);

Prende come argomento un array che ha come valori alternativamente la lunghezza del tratteggio e la loro distanza.
Ad esempio se applicassimo ad una riga setLineDash([5, 15]), questa avrebbe un tratteggio di 5 e una distanza tra di loro di 15. Mentre se scrivessimo setLineDash([5, 15, 8, 10]), il primo tratteggio sarebbe lungo 5 con una distanza di 15 dal secondo che sarebbe lungo 8 e avrebbe una distanza dal terzo di 10 e con il quarto il ciclo ricomincerebbe.

Nell' immagine quà sotto è sicuramente più chiaro.

ctx.beginPath();
ctx.lineWidth = 3;
ctx.setLineDash([5, 15]);
ctx.moveTo(50, 250);
ctx.lineTo(300, 250);
ctx.stroke();


ctx.beginPath();
ctx.lineWidth = 3;
ctx.setLineDash([5, 15, 8, 10])
ctx.moveTo(50, 300);
ctx.lineTo(300, 300);
ctx.stroke();

CONCLUSIONE

In questo articolo abbiamo imparato a mettere degli stili alle forme e alle linee, non ho messo tutti gli stili possibili, mancano all'appello stili come i gradienti o i pattern.
Li tratterò in brevi post dedicati.

Se avete dei consigli, suggerimenti o critiche costruttive lasciatemi un commento qui sotto oppure contattatemi trammite i miei social.