Il logo del sito

Appunti su JavaScript

Gestione delle aree di disegno - 5

HTML5 ha introdotto i canvas, aree della pagina video in cui si può disegnare e scrivere tramite JavaScript.

Prove con le funzioni cubiche di bezier

Per sapere qualcosa di più sulle curve di Bezier Curva di Bézier su Wikipedia. Ci sono animazioni che mostrano come sono costruite.

La funzione bezierCurveTo consente di unire due punti con una curva di tipo cubico.

Le coordinate del primo punto della curva devono essere specificate con moveTo(xIniziale, yIniziale). Rispetto alle curve quadratiche, in cui si aveva un solo punto di controllo, qui i punti di controllo sono due. Le coordinate dei due punti di controllo e del punto finale devono essere specificati con il metodo bezierCurveTo, la cui sintassi è la seguente:

context.bezierCurveTo(xc1,yc1,xc2,yc2,xFinale, yFinale);
Uniamo due punti qualsiasi del canvas con una curva di cubica di bezier
avente i punti di controllo interni al canvas:
 o 
  
  
  
  

Codice js: js_09.js

I segmenti grigi si uniscono nei due punti di controllo.