elemento html5 canvas

L’elemento HTML5 Canvas è un tag HTML, con la differenza rispetto agli altri, che il suo contenuto è renderizzato tramite javascript. L’elemento HTML5 canvas può essere inserito ovunque nella pagina web tramite l’apposito tag <canvas></canvas>, in seguito si “disegnerà” il contenuto utilizzando delle speciali API javascript sviluppate appositamente per l’elemento canvas.

Prima di iniziare a scrivere codice è giusto chiarire la differenza che esiste tra l’elemento HTML5 canvas e il contenuto del canvas stesso. Il tag <canvas> è a tutti gli effetti un nodo del DOM inserito nella pagina HTML. Il contenuto del canvas, invece, è un oggetto con delle proprietà e funzioni proprie, che ti aiutano a renderizzare la grafica all’interno del tag <canvas>. Da sottolineare inoltre è il fatto che il contenuto può essere in 2D oppure webgl(3D).

Dopo questa breve introduzione sull’elemento HTML5 canvas è giunto il momento di iniziare il nostro lungo cammino all’interno di questo tag affrontando come primo argomento le linee.

Dal punto A al punto B

Torniamo fra i banchi di scuola e rispolvera le basi di geometria.

La linea, per definizione, è:

un qualsiasi oggetto che congiunge due estremi.

La prima cosa che disegnerai sulla tua tela virtuale è una linea, ne più ne meno.

Le funzioni che vedremo in gioco in questo esempio sono:

  • beginPath() – questa funzione indica l’inizio di un percorso o il reset del percorso
  • moveTo() – muove l’oggetto a delle determinate coordinate (sinistra, alto)
  • lineTo() – crea un nuovo punto e genera una linea che lo congiunge con il punto d’origine (attenzione: non disegna la linea)
  • stroke() – funzione che disegna effettivamente la linea definita dalle precedenti funzioni.

Analizziamo il codice:

Per prima cosa creiamo la nostra tela utilizzando l’elemento HTML5 canvas e definiamo la larghezza e l’altezza. Una volta stabilite le dimensioni dell’area di lavoro è tempo di iniziare a scrivere lo script che renderizzerà il disegno.

Navigando nel DOM diamo le direttive al codice javascript su dove disegnare, fornendogli l’id della nostra tela. Seconda cosa da fare prima di tirare la tua prima linea è definire il contenuto, in questo caso e anche in tutti gli esempi a venire, il contenuto sarà in 2D.

Iniziamo con la funzione beginPath(), così da dichiarare l’intenzione di disegnare un nuovo tracciato. Successivamente definiamo la posizione del primo punto con la funzione moveTo(). Tiriamo una linea fino ad un’altra coordinata, definita grazie alla funzione lineTo() (attenzione: questa funzione  non disegna la linea). Infine, per disegnare effettivamente la linea all’interno della tua tela virtuale devi usare la funzione stroke(), grazie alla quale verrà renderizzata una bella linea nera, come nell’esempio qui sotto.

[codepen_embed height=”268″ theme_id=”8048″ slug_hash=”gJqyt” default_tab=”result” user=”manuelvrc”]See the Pen <a href=’http://codepen.io/manuelvrc/pen/gJqyt/’>gJqyt</a> by Manuel Ricci (<a href=’http://codepen.io/manuelvrc’>@manuelvrc</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Facciamo ingrassare la linea

La nostra linea è stata renderizzata correttamente. Penso sia il momento giusto per introdurre la proprietà lineWidth che permette di definire lo spessore della linea che abbiamo precedentemente disegnato grazie alle API dell’elemento HTML5 canvas.

Affinché la proprietà venga applicata e renderizzata correttamente deve essere dichiarata prima della funzione stroke().

Qui di seguito un esempio chiarificatore:

[codepen_embed height=”268″ theme_id=”8048″ slug_hash=”jBIGs” default_tab=”result” user=”manuelvrc”]See the Pen <a href=’http://codepen.io/manuelvrc/pen/jBIGs/’>jBIGs</a> by Manuel Ricci (<a href=’http://codepen.io/manuelvrc’>@manuelvrc</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Colori, colori ovunque

Che capolavoro sarebbe senza un filo di colore? Aggiungiamone un po’ alla nostra tela con la proprietà strokeStyle la quale accetta colori come ad esempio ‘red’, ‘green’, ‘blue’, colori esadecimali o valori RGB.

Qui di seguito il live code:

[codepen_embed height=”268″ theme_id=”8048″ slug_hash=”dxmtD” default_tab=”result” user=”manuelvrc”]See the Pen <a href=’http://codepen.io/manuelvrc/pen/dxmtD/’>dxmtD</a> by Manuel Ricci (<a href=’http://codepen.io/manuelvrc’>@manuelvrc</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Dat Butt

L’ultima parte che affronteremo sulle linee sono le estremità di quest’ultime. Se non ti piacciono gli spigoli, l’elemento HTML5 canvas ha la soluzione anche per questo.

Le tipologie di estremità disponibili sono:

  1. butt – secondo la specifica dell’elemento HTML5 canvas è l’estremità di default
  2. round – angoli arrotondati
  3. square – non si differenzia più di tanto da butt

La proprietà da utilizzare per definire l’estremità delle linee è lineCap. Come per le altre proprietà, per essere renderizzata correttamente la proprietà lineCap deve essere inserita prima della funzione stroke().

Un bel live code è perfetto per capire al meglio come applicare le estremità.

[codepen_embed height=”268″ theme_id=”8048″ slug_hash=”pwoqA” default_tab=”result” user=”manuelvrc”]See the Pen <a href=’http://codepen.io/manuelvrc/pen/pwoqA/’>pwoqA</a> by Manuel Ricci (<a href=’http://codepen.io/manuelvrc’>@manuelvrc</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Nella prossima puntata

Con questo post ho concluso il primo appuntamento sull’elemento HTML5 Canvas. Nel prossimo post dedicato a questo meraviglioso e potentissimo elemento parleremo di curve e delle tipologie di curve disponibili per la nostra tela virtuale.