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 bezierLink 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