Tutorial per per l'uso del metodo closePath() - matematica con javascript su webfract

Contatti	MATEMATICA CON JAVASCRIPT - GUIDA CANVAS TUTORIAL PER L'USO DEL METODO closePath()

Il presente tutorial si riferisce a "chiudere un percorso con HTML5 canvas" della guida a MATEMATICA CON JAVASCRIPT, area Canvas.

Abbiamo preparato un documento che ha l'aspetto definito dalle righe di codice inserite nell'area di testo in basso a sinistra.
In particolare, vi consigliamo di aggiungete o togliere i doppi slash a una delle istruzioni ctx.closePath(); in modo da osservare come varia il disegno a destra.

E' possibile cambiare anche le altre opzioni e quindi vedere l'anteprima cliccando sul tasto:

A LATO per osservare il risultato nell' iframe a destra nella pagina;
POPUP per osservare il risultato in una finestra popup

NOTA BENE - Gli utenti google chrome possono solo visualizzare il risultato in una popup, a causa del malfunzionamento del browser con gli iframe.

Infine, cliccando sul tasto AGGIORNA, viene ricaricata la pagina corrente come è adesso:

IN EVIDENZA DAL SITO

www.tommasobientinesi.it

La passione per i viaggi e la natura nel nuovo sito di Tommaso Bientinesi

CODICE

<BODY> <canvas id="lavagna" width="200" height="200"></canvas> <script> var c = document.getElementById('lavagna'); var ctx=c.getContext("2d"); ctx.fillStyle = 'red'; ctx.moveTo(50,100) ctx.fillText('A',40,100) ctx.lineTo(100,150); ctx.fillText('B',100,160) //ctx.closePath(); ctx.lineTo(150,100); ctx.fillText('C',153,102) ctx.closePath(); ctx.lineTo(163,65); ctx.fillText('D',166,65) //ctx.closePath(); ctx.lineTo(100,50); ctx.fillText('E',98,48) ctx.closePath(); ctx.fill() ctx.stroke(); </script> </BODY> </HTML>

RISULTATO

Matematica con javascript, area Canvas: Indice - Metodo closePath() Matematica con javascript Indice - Indice tutorials

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS

TUTORIAL PER L'USO DEL METODO closePath()

CODICE

RISULTATO