Canvas Javascript: Come aggiungere lo stile alle figure geometriche
Tags: javascript, canvas, stile, forme
Published: 2021-01-09 20:46:17

---
title: Canvas Javascript: Come aggiungere lo stile alle figure geometriche
published: true
description: Aggiungere gli stili a forme e linee
tags: javascript, canvas, stile, forme
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/685e2goh1a660axvf5vv.jpg
---
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](https://www.w3.org/wiki/CSS/Properties/color/keywords)
* 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.

``` javascript 
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.

``` javascript 
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.

{% codepen https://codepen.io/camizzilla/pen/xxEWNVR %}

### 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.

``` javascript
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.

``` javascript 
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

``` javascript
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.

``` javascript
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();
```

{% codepen https://codepen.io/camizzilla/pen/WNGybxO %}

###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.