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

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

Il presente tutorial si riferisce a "disegnare un arco 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 sono presenti alcune istruzioni precedute da un doppio slash, come //ctx.arc(x_C,y_C,r,inizio,fine,false); //verso orario: potete togliere i doppi slash a una delle istruzioni e aggiungerli a un'altra, in modo da osservare 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="200" height="200" style="border:1px solid #d3d3d3;">Il tuo browser non supporta il tag HTML5 canvas.</canvas> <script> var r=50; //raggio var inizio=0.25*Math.PI; //primo estremo var fine=1.25*Math.PI; //secondo estremo var x =100; //ascissa centro var y =100; //ordinata centro var c=document.getElementById("lavagna"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.strokeStyle = 'navy'; ctx.arc(x ,y ,r,inizio,fine,true); //verso antiorario //ctx.arc(x ,y ,r,inizio,fine,false); //verso orario //ctx.arc(x ,y ,r,inizio,fine); //verso orario ctx.stroke(); </script> </BODY> </HTML>

RISULTATO

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

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS

TUTORIAL PER L'USO DEL METODO arc()

CODICE

RISULTATO