Tutorial per creare un sistema di riferimento - matematica con javascript su webfract

Contatti	MATEMATICA CON JAVASCRIPT - GUIDA CANVAS TUTORIAL PER CREARE UN CARTESIANO ORTOGONALE

Il presente tutorial si riferisce a "sistema di riferimento cartesiano ortogonale 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.
Ascissa e ordinata dell'origine del sistema sono memorizzate, secondo l'ordine dato, rispettivamente nelle variabili Ox e Oy, mentre l'unità di misura nella variabile u.

E' possibile cambiare anche le varie 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

<!DOCTYPE html> <HTML> <BODY> <canvas id="lavagna" width="400" height="400" style="border:1px solid maroon"></canvas></p> <script> var c = document.getElementById('lavagna'); const Ox=c.width/2; //ascissa origine const Oy=c.height/2; //ordinata origine const u = 20; //unità di misura var ctx=c.getContext("2d"); ctx.strokeStyle="rgba(120,120,120,0.5)" ctx.fillStyle="rgba(120,120,120,0.5)" ctx.moveTo(Ox+50,20); //segmento unità di misura ctx.lineTo(Ox+50 + u,20); ctx.moveTo(20,Oy); // punto di partenza ctx.lineTo(c.width-20,Oy); //asse x ctx.moveTo(c.width-20,Oy-4); //punta asse x ctx.lineTo(c.width-20,Oy+4); ctx.lineTo(c.width-12,Oy); ctx.lineTo(c.width-20,Oy-4); //fine punta asse x ctx.moveTo(Ox,20); //coordinate punto di partenza ctx.lineTo(Ox,c.height-20); //asse y ctx.moveTo(Ox-4,20); //punta asse y ctx.lineTo(Ox+4,20); ctx.lineTo(Ox,12); ctx.lineTo(Ox-4,20); //fine punta asse y ctx.stroke(); //disegna ctx.fill() //riempimento frecce ctx.fillStyle="rgb(0,0,0)" // scrive x, y, O, u ctx.fillText('x',c.width-20,Oy+10) ctx.fillText('y',Ox+5,20) ctx.fillText('O',Ox+2,Oy+10) ctx.fillText('u',Ox+50+u/2,30) //TRASLAZIONE ctx.translate(Ox,Oy); //Esempio di coordinate e punto P ctx.fillStyle="rgb(255,0,0)" ctx.fillRect(4*u,-3*u,2,2) ctx.fillText('M',4*u+2,-3*u) </script> </body> </html>

RISULTATO

Matematica con javascript, area Canvas: Indice - Sistema di riferimento cartesiano ortogonale Matematica con javascript Indice - Indice tutorials

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS

TUTORIAL PER CREARE UN CARTESIANO ORTOGONALE

CODICE

RISULTATO