Canvas e html5: Come utilizzare beginPath

Canvas e l’html5 prevedono l’uso del metodo beginPath() che indica al browser il punto di inizio del percorso, mentre closePath()  lo chiude.

Qui di seguito troviamo un esempio su come possiamo usare questi due metodi:

<canvas id="iniziopath" width="600" height="200">
 </canvas>
 <script>
 var percorso = document.getElementById("iniziopath");
 var context = percorso.getContext("2d");

 context.beginPath();
 context.moveTo(110, 150);
 context.lineTo(160, 50);
 context.lineTo(210, 150);
 context.closePath();
 context.lineWidth = 20;
 context.stroke();
 </script>

Una volta impostate le variabili. per richiamare l’id del canvas e le librerie Api per la visualizzazione delle immagini in 2d, possiamo impostare il metodo beginPath() per indicare l’inizio del percorso delle linee.

Nelle variabili successivi vengono richiamati i metodi moveTo() e lineTo() per impostare il punto d’inizio e la posizione di fine della linea che deve essere tracciata all’interno del canvas.

Per disegnare, infine, l’ultima linea, che in questo caso è data dalla base del triangolo, utilizziamo il metodo closePath().

Come vedremo, una volta impostato questo metodo, il disegno verrà completato con la visualizzazione dell’ultima linea che andrà a chiudere il triangolo.

La proprietà lineWidth serve ad impostare lo spessore delle linee e stroke per visualizzare l’immagine nella pagina web.

La prossima lezione sul canvas riguarderà, invece su come colorare e dare spessore ad una linea.

Per scaricare l’esempio in formato html condividi questo articolo cliccando su uno dei pulsanti qui sotto.

download esempio beginpath
Link a questo articolo!Canvas e html5: Come utilizzare beginPath" readonly="readonly" type="text" style="width: 100%;" onclick="javascript:this.select()" /> Category: Canvas e html5