Canvas e le curve di Bezier in html5

Per disegnare le curve di Bezier in html5 dobbiamo utilizzare il metodo bezeirCurveTo(); che include 6 parametri.

Questi parametri definiscono i valori sull’asse x e y che spostano il punto sull’asse x in senso orizzontale e sull’asse y in senso verticale.

i primi due valori si riferiscono al primo punto di controllo posizionato sull’asse x, y;
i valori 3 e 4 si riferiscono al secondo punto di controllo posizionato sull’asse x, y;
i valori 5 e 6 si riferiscono alle coordinate x e y per la linea di destinazione.

Vediamo un esempio pratico delle curve di Bezier. L’esempio dello script è scaricabile dal link in fondo alla pagina.

<!DOCTYPE HTML>
<html>
 <head><title>Bezier</title>
 </head>

<body>
 <canvas id="bezier" width="600" height="300">
 </canvas>

<script>
 var canvas = document.getElementById("bezier");
 var context = canvas.getContext("2d");
 var controlloX1 = 488 // sposta il primo punto in senso orizzon tale
 var controlloY1 = 30; // sposta il primo punto in senso vertica le
 var controlloX2 = 388; // sposta il secondo punto in senso oriz zontale
 var controlloY2 = 100; // sposta il secondo punto in senso vert icale
 var fineX = 500; // sposta il punto finale della linea in senso orizzontale
 var fineY = 180; // sposta il punto finale della linea in senso verticale

 context.moveTo(150, 130);
 context.bezierCurveTo(controlloX1, controlloY1, controlloX2, controlloY2, fineX, fineY);
 context.lineWidth = 10; //spessore della linea
 context.strokeStyle = "green"; // linea del colore
 context.stroke(); // richiama il metodo per visualizzare disegno
 </script>
 </body>
</html>

Come si vede dall’esempio le variabili controlloX1 e controlloY1 spostano il primo punto nel canvas in senso orizzontale ed in senso verticale. La stessa cosa avviene con controlloX2 e controlloY2 per il secondo punto.

Le variabili fineX e fineY modificano la lunghezza della linea di destinazione in senso orizzontale e verticale.

Modificando i valori delle 6 variabili possiamo decidere la lunghezza della linea e la sua curvatura.

Qui di seguito vi è una rappresentazione grafica dei punti di controllo.

Una volta definito i parametri del metodo impostiamo alcune proprietà delle curve, che in questo caso sono lineWidth() per lo spessore della linea, strokeStyle() per il colore e stroke() per la visualizzazione del disegno nel browser.

Nel prossimo post tratteremo, invece, di come impostare i vari tipi di angolo con lineJoin nel canvas. Non ti perdere questo appuntamento.

Per scaricare l’esempio informato html clicca su uno dei pulsanti din condivisione per visualizzare il link del download.

download esempio bezier
Link a questo articolo!Canvas e le curve di Bezier in html5" readonly="readonly" type="text" style="width: 100%;" onclick="javascript:this.select()" /> Category: Canvas e html5