le curve con canvas HTML5

Eccoci al secondo appuntamento con Canvas HTML5, nell’ultimo appuntamento hai visto come creare delle linee con le API per Canvas di Javascript, in questo nuovo tutorial imparerai a disegnare delle curve, con l’aiuto delle funzioni arc(), quadraticCurveTo() e bezierCurveTo().

L’arco

La prima cosa da introdurre quando si parla di curve disegnate con Canvas HTML5 è la funzione arc().

Per renderizzare correttamente un arco, la funzione arc() ha bisogno dei seguenti parametri:

  • punto centrale
  • raggio
  • angolo di partenza
  • angolo di fine
  • direzione (oraria o anti-oraria)

Per personalizzare e dare un po’ di stile all’arco hai a disposizione delle proprietà già viste nel precedente appuntamento con Canvas HTML5. Le proprietà sono lineWidth, strokeStyle e lineCap.

Per “arco” si intende una sezione di una circonferenza di un cerchio immaginario. Per definire il cerchio bisogna definire con le coordinate x e y la posizione del punto centrale, mentre con il raggio definisci la grandezza del cerchio

Una volta stabiliti i valori di base passiamo all’arco vero e proprio. Sono necessari un angolo d’inizio ed un angolo di fine per ottenere un arco. L’unità di misura, di questi due angoli, è in radianti e una volta dichiarati formano una linea immaginaria che ha origine dal centro del cerchio ed interseca con l’angolo di fine.

L’ultimo parametro da determinare è il senso in cui l’arco debba essere renderizzato da javascript tra i due angoli di inizio e di fine. Non c’è molto da dire, i sensi sono due o in senso orario (false – default) oppure in senso anti-orario (true).

Con utte ste informazioni è tempo di vedere all’opera la funzione arc():

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

Curve quadrate

Per creare una curva quadratica in Canvas HTML5 possiamo usare la funzione quadraticCurveTo(). Queste speciale curva è definita da cinque punti:

  • 1 punto iniziale
  • 2 punti mediani
  • 1 punto di controllo
  • 1 punto di fine

Come per l’arco la curva quadratica è personalizzabile con le proprietà lineWidth, strokeStyle e lineCap.

Il punto iniziale o context point è definito dalla funzione moveTo(), ma ciò che realmente crea e da forma alla curva quadratica è il punto di controllo il quale crea due tangenti immaginarie, le quali sono connesse al punto iniziale e al punto fine.

Se la posizione del punto di controllo è la lontana dal punto iniziale e dal punto di fine, la curva che andrai a creare sarà più “stretta”. Se, invece, la posizione del punto di controllo è più vicina al punto iniziale e di fine otterrai una curva più ampia, come nell’esempio che segue:

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

Curva di Bézier

Chi di grafica se ne intende, sa benissimo che con la curva di Bézier ha a che fare tutti i giorni. Infatti questa speciale tipologia di curva può essere creata con lo strumento penna dei principali programmi di grafica come photoshop ed illustrator. Come si fa a disegnare la curva di Bézier con Canvas HTML5?

Per creare la curva di Bézier, possiamo usare la funzione bezierCurveTo(). Come le altre funzioni, viste in precedenza, anche questa ha bisogno di alcuni parametri, vediamo quali:

  • 1 punto d’inizio
  • 2 punti di controllo
  • 1 punto di fine

A differenza della curva quadratica, che abbiamo visto nel paragrafo precedente, la curva di Bézier ha bisogno di due punti di controllo anziché uno, permettendoci quindi di creare curvature più complesse. Come per gli altri due esempi di curve, è possibile abbellire la curva di Bézier con le proprietà lineWidth, strokeStyle e lineCap.

La curva di Bézier è definita dal punto di partenza, due punti di controllo e un punto di fine. La prima parte della curva è tangente alla linea immaginaria definita dal punto iniziale e il primo punto di controllo. La seconda parte della curva è tangente alla linea immaginaria definita dal secondo punto di controllo e il punto di fine.

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

Iniziare a disegnare qualcosa con il canvas HTML5

Siamo solo al secondo appuntamento con l’elemento canvas HTML5 e se ti armi con un po’ di fantasia puoi già cominciare a disegnare qualcosa.

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

Che te ne pare? Interessanti queste curve. Più andremo avanti, più diventerà intrigante. Nella prossima puntata dedicata al Canvas HTML5 imparerai a creare dei percorsi, unire le linee e creare bordi arrotondati. Non vedi l’ora, vero? Alla prossima!