HOME

Contatti

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS


4 - Metodi moveTo() e lineTo()

Precedente - Indice guida canvas - Successivo


A
rgomenti correlati:

 

Segnare un punto con lineTo()


Oltre che con i metodi strokeRect(), fillRect() o arc(), un punto può essere segnato tracciando una retta di 1 pixel.

SCRIPT

var c=document.getElementById("lavagna");
var ctx=c.getContext("2d");
ctx.moveTo(50,100);
ctx.lineTo(51,100);
ctx.moveTo(100,100);
ctx.lineTo(101,100);
ctx.moveTo(50,80);
ctx.lineTo(51,80);
ctx.moveTo(50,180);
ctx.lineTo(51,180);
ctx.stroke();


Triangolo di vertici A, B, C


Siano A(xA, yA); B(xB, yB); C(xC, yC).

Partiamo dalla posizione di A
ctx.moveTo(xA, yA);

creiamo il segmento fino a B;
ctx.lineTo(xB, yB);

creiamo il segmento fino a C;
ctx.lineTo(xC, yC);

creiamo il segmento fino ad A
ctx.lineTo(xA, yA);

disegniamo il triangolo ABC
ctx.stroke();

ESEMPIO

Con il seguente codice:

si ottiene questo triangolo

Noterete che, anche in questo caso, si è preferito introdurre coordinate variabili.


Poligoni


Si costruisce con lo stesso metodo del triangolo, a parte il rettangolo che si può anche costruire con un metodo apposito.
E' comunque molto comodo impostare un programma che disegni un poligono di un qualunque numero di vertici. A tal fine conviene inserire due variabili di tipo array, una per le ascisse e l'altra per le ordinate dei vertici.
In questo modo, una volta posizionati sul primo vertice, i lati si possono costruire con un ciclo enumerativo.
Fuori del ciclo di ritorna al primo vertice e si disegna il poligono.

 


Vi invitiamo, se volete provare il vostro codice, a visionare la sezione

PROVA TU - METODO lineTo() CON array

 


METODO moveTo(x,y)    

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

x = distanza, in pixel, dal bordo sinistro della canvas;
y = distanza, in pixel, dal bordo in alto della canvas.

ESEMPIO

Supponiamo di voler disegnare tre circonferenze: se scriviamo soltanto
ctx.arc(100 ,100 ,50,0,2*Math.PI);
ctx.arc(150 ,120 ,50,0,2*Math.PI);
ctx.arc(100 ,160 ,50,0,2*Math.PI);
ctx.stroke();
otteniamo la figura 1: come si vede, le circonferenze sono collegate da linee; invece, se disponiamo opportunamente la penna grafica, nelle posizioni indicate in rosso nella figura 2, otteniamo la figura 3.

Figura 1
Figura 2
Figura 3

Per comprendere il motivo basta ricordare il sistema di riferimento relativo al metodo arc().


Vi invitiamo a visionare la sezione

PROVA TU - METODO moveTo()

Troverete il codice e l'anteprima, insieme con la possibilità di variarlo a vostra scelta.

 


 

Il metodo, si applica, fra l'altro, quando si deve disegnare un segmento, insieme al metodo lineTo(x,y).

METODO 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().

Se ancora non è stato creato alcun disegno, si può creare l'estremo iniziale con il metodo moveTo(x0,y0).

TRACCIAMO UN SEGMENTO    

Tracciamo il segmento AB come quello che abbiamo disegnato nella presentazione del sistema di riferimento e che qui riportiamo.

I passi da seguire sono molto semplici:
  1. Posizionarsi in (90,70): metodo moveTo(x, y), che definisce il punto iniziale del segmento;
  2. arrivare fino a (120,200): metodo lineTo(x, y), che definisce il punto finale del segmento;
  3. disegnare il segmento: metodo stroke(), che lo disegna.
Facciamo presente che la figura è stata creata "al volo", mediante HTML5 canvas e javascript. Abbiamo creato un'immagine a tutti gli effetti, nfatti, se ci cliccate sopra con il tasto destro del mouse, dal menu di contesto potete scegliere fra le opzioni "visualizza immagine", "salva immagine co nome" etc.
Noterete che il bordo della canvas non è visibile, infatti non fa parte del disegno.

CODICE

<canvas id="lavagna" width="400" height="300"></canvas></p>
<script>
var c = document.getElementById('lavagna');
var ctx=c.getContext("2d");
ctx.moveTo(90,70);
ctx.lineTo(120,200);
ctx.stroke();
</script>

 


Vi invitiamo, se volete provare il vostro codice, a visionare la sezione

PROVA TU - METODO lineTo()

 


 

Precedente - Successivo

 


IN EVIDENZA DAL SITO

 







CALCOLATRICE
SCIENTIFICA



CON SPIEGAZIONI
ED ESEMPI

 




TARTAMONDO - PER BAMBINI




AREA GIOCHI

 

 

 

 

 


www.tommasobientinesi.it

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





Guida a matematica con javascript: indice  -  Guida al tag HTML5 canvas: indice


©2002 - 2013 www.webfract.it