Tutorial per per l'uso dei metodi moveTo() e lineTo() - matematica con javascript su webfract

Contatti	MATEMATICA CON JAVASCRIPT - GUIDA CANVAS TUTORIAL PER L'USO DEI METODI lineTo() e moveTo()

Il presente tutorial si riferisce a "disegnare un segmento 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 è presente un'istruzione preceduta da un doppio slash: //ctx.moveTo(10,80). Togliete i doppi slash e osservate come varia il disegno a destra.
I parametri x , y , r, inizio, fine sono inseriti all'inizio, come variabili.

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

<HTML> <BODY> <canvas id="lavagna" width="400" height="300"></canvas></p> <script> var c = document.getElementById('lavagna'); var ctx=c.getContext("2d"); ctx.moveTo(50,70); //coordinate punto di partenza ctx.lineTo(120,200); //coordinate punto di arrivo //ctx.moveTo(10,80); //coordinate punto di partenza ctx.lineTo(20,200); //coordinate punto di arrivo ctx.stroke(); //disegna </script> </BODY> </HTML>

RISULTATO

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

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS

TUTORIAL PER L'USO DEI METODI lineTo() e moveTo()

CODICE

RISULTATO