MATEMATICA CON JAVASCRIPT - GUIDA CANVAS

Sistema di riferimento cartesiano ortogonale

Indice guida canvas

Metodo translate()

Riposiziona l'origine (0,0) della canvas.

SINTASSI

context.translate(x,y);

APPROFONDIMENTO

Metodo scale()

Ci permette di dilatare o contrarre la canvas sia orizzontalmete che verticalmente.

SINTASSI

context.scale(x,y);

APPROFONDIMENTO

Se nel grafico dobbiamo rappresentare solo insiemi di punti, possiamo l'orientamento dell'asse y con il codice ctx.scale(1,-1).
Se però vogliamo anche aggiungere anche il nome dei punti, ricordiamo che, in questo caso, i nomi verranno tutti rovesciati!

ctx.moveTo(x,y);

Posiziona la penna grafica nel punto indicato dalle coordinate (x,y), iniziando un nuovo percorso e senza disegnare.

ctx.lineTo(x,y);

Crea un segmento dal punto in cui si trova attualmente la penna grafica a quello specificato da (x,y). Non disegna: per far questo occorre sempre usare il metodo stroke().

Metodo stroke()

Disegna il percorso attualmente attivo.

Scegliere un colore per gli assi cartesiani e per le lettere

Visita la sezione come colorare, che è di introduzione ai colori.
Se poi vuoi crearti un colore particolare, puoi usare il tutorial scegli un colore.

Come abbiamo già visto, in tutti i riferimenti grafici sul computer, l'origine O è situata nell'angolo superiore sinistro. Le coordinate di un punto P sono del tipo P(left, top), dove:
left è la distanza, in pixel, dal bordo sinistro della canvas;
top è la distanza, in pixel, dal bordo in alto della canvas.

Anche nel sistema di riferimento che usiamo di solito in matematica, l'asse x è orientata orizzontalmente verso destra, ma l'asse y è orientata dal basso verso l'alto. Inoltre:

• visto che vogliamo anche rappresentare coordinate frazionarie, dobbiamo inserire un'unità di misura di un certo numero di pixel (nella figura a destra, abbiamo preso 10 pixel);
• visto che vogliamo anche rappresentare coordinate negative, spostiamo a destra, sempre rispetto al riferimento della finestra grafiica, l'origine del sistema di riferimento.

In ogni modo creeremo un sistema di riferimento generico in modo da poterlo adattare, di volta in volta, alle esigenze del caso.

PREMESSA

La canvas è stata creata con il seguente codice

Inoltre, nello script, abbiamo posto

Visto che vogliamo un sistema di riferimeno generico, inseriremo delle variabili per

1. l'ascissa dell'origine del sistema di riferimento Ox: const Ox=c.width/2;
   //ascissa origine posta al centro della base della finestra grafica;
2. decidiamo l'ordinata dell'origine del sistema di riferimento Oy: const Oy=c.height/2;
   //ordinata origine posta al centro dell' altezza della finestra grafica;
3. decidiamo l'unità di misura u: const u = 20;
   //unità di misura di 20 pixel;
4. tracciamo l'asse x
   ctx.moveTo(20,Oy); //punto di partenza
   ctx.lineTo(c.width-20,Oy); //punto di arrivo
   ctx.stroke();
5. tracciamo l'asse y
   ctx.moveTo(Ox,20); //punto di partenza
   ctx.lineTo(Ox,c.height-20); //punto di arrivo
   ctx.stroke();

PASSO UNO

PASSO DUE

Moltiplichiamo l'ascissa per l'unità di misura

Moltiplichiamo l'ordinata per l'unità di misura e cambiamo segno (visto che dobbiamo cambiare l'orientamento dell'asse y

Siamo ora pronti a rappresentare le nostre funzioni!

IN EVIDENZA DAL SITO

CALCOLATRICE
SCIENTIFICA


CON SPIEGAZIONI
ED ESEMPI

TARTAMONDO - PER BAMBINI

AREA GIOCHI