:::: MENU ::::

Il Canvas in HTML5

HTML5_Logo_512Una delle caratteristiche salienti dell’HTML5 è sicuramente il nuovo elemento Canvas. Del tutto simile a qualsiasi altro tag HTML ma con l’unica eccezione che il suo contenuto viene renderizzato tramite Javascript. Canvas è quindi una “tela” digitale utilizzata per disegnare in maniera digitale. Avendo delle basi di Javascript, è possibile “disegnare” all’interno del canvas. Il funzionamento è abbastanza semplice: si definisce un <canvas> all’interno del body della pagina, vi si accede tramite Javascript, si crea un contesto e si inizia a disegnare. Fin qui, è tutto molto semplice.

Quando si utilizza un canvas, è importante capire la differenza tra l’elemento canvas e il contesto canvas (context), poichè tle differenza potrebbe portare confusione. L’elemento canvas è il tag HTML, il nodo DOM, che viene scritto all’interno di una pagina HTML. Il contesto è un oggetto con delle proprietà e metodi che puoi utilizzare per disegnare forme all’interno dell’elemento canvas. Il contesto può essere 2D o 3D. Ogni canvas contiene un solo context. Se ustiamo il metodo getContext() più volte, ritornerà come riferimento l ostesso oggetto context.

La linea

Disegnare una linea, è abbastanza semplice.

Innanzitutto si definisce il canvas (di dimensioni 578×200), quindi con Javascript si accede all’elemento e si richiama getContext per utilizzare il contesto 2D del canvas. Dopo viene la chiamata al metodo beginPath() per dichiarare che ci stiamo preparando a disegnare un path. Successivamente, utilizziamo il metodo moveTo() per posizionare il cursore nel punto iniziale e poi utilizziamo lineTo() per disegnare una linea dritta dal punto iniziale alla nuova posizione definita con lineTo(). Infine, per rendere la linea visibile, possiamo applicare un bordo con il metodo stroke().  Di default, il colore del bordo è nero.

  • Possiamo definire lo spessore della linea, utilizzando la proprietà lineWidth, che va definita prima della chiamata a stroke();
  • Possiamo definire il colore della linea, utilizzando la proprietà strokeStyle, che va definita prima della chiamata a stroke();
  • Possiamo definire il “terminale” della linea, utilizzando la proprietà lineCap che può assumere i valori butt (di default), round (arrotondato) o square (quadrato). Anch’essa va definita prima della chiamata a stroke();

Il rettangolo

Un rettangolo è la forma più semplice da disegnare. Può essere a tinta unita oppure si può lasciare vuoto.

Dopo aver dichiarato il canvas e il contesto, si parte con la funzione beginPath(), quindi si utilizza la funzione rect() che prende in ingresso 4 parametri:

x, y (la posizione del rettangolo espressi in pixel, considerando come punto di riferimento l’angolo in alto a sinistra del rettangolo) e width, height (lunghezza e altezza del rettangolo). Si passa poi a stabilire un colore del rettangolo, a scegliere il contorno e infine con stroke() si renderizza a video.

L’arco, il cerchio e il semicerchio

Il cerchio non è altro che un arco chiuso. Il semicerchio è un cerchio a metà. Quindi descriviamo prima la procedura per ottenere un qualsiasi arco aperto. Tralasciando le altre funzioni ci concentriamo sulla funzione context.arc() che prende in ingresso 6 parametri.

x e y indicano la posizione del cerchio, con riferimento il punto centrale; radius è il raggio della circonferenza; startAngle e endAngle indicano rispettivamente l’angolo di partenza e l’angolo di arrivo (per un cerchio completo l’angolo di partenza sarà zero, mentre l’angolo di arrivo sarà 360°, cioè 2*Math.PI; Per un semicerchio, l’angolo di arrivo sarà l’angolo di partenza * Math.PI); infine counterClockwise (boolean) indica la direzione della circonferenza, cioè se si parte da destra verso sinistra o viceversa.

arc

Aumentiamo la complessità: il path

Possiamo disegnare un percorso di linee. L’esempio più semplice è quello di utilizzare linee rette, come nell’esempio qui sotto:

Partendo dal punto di coordinata x=100 e y=20, si disegna una linea arrivando al punto (200, 160) e da qui si disegna un’altra linea arrivando al punto (250, 90) ed infine un’altra linea arrivando al punto (550, 180).

 

Approfondimenti

Maggiori informazioni sull’utilizzo del canvas e sulle altre possibili possibilità di disegno si possono trovare qui: http://www.w3schools.com/tags/ref_canvas.asp


Comments are closed.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close