HOME

Contatti

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS


6 - Chiudere un percorso

Precedente - Indice guida canvas - Successivo


A
rgomenti correlati:

RICHIAMO DI METODI

beginPath()

Inizia un nuovo percorso, o resetta il percorso attualmente attivo.


stroke()

Disegna il percorso attualmente attivo.


fill()

Colora l'interno del percorso attaualmente attivo.


DUE TRIANGOLI CON UN ESTREMO IN COMUNE
CON closePath()

 

Usando opportunamente il metodo closePath() possiamo disegnare i due triangoli ABC e ADE.

Ecco un frammento di codice

ctx.fillStyle = 'red';
ctx.moveTo(50,100);
ctx.fillText('A',40,100);
ctx.lineTo(100,150);
ctx.fillText('B',100,160);
ctx.lineTo(150,100);
ctx.fillText('C',153,102);
ctx.closePath();
ctx.lineTo(163,65);
ctx.fillText('D',166,65);
ctx.lineTo(100,50);
ctx.fillText('E',98,48);
ctx.closePath();
ctx.fill();
ctx.stroke();

Il codice completo si trova nella sezione
PROVA TU - METODO closePath()

 


www.tommasobientinesi.it

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



PRIMO ESEMPIO    

Supponiamo di avere 4 punti:
A(50,100), B(100,150), C(150,100), D(100,50).

Se usiamo il codice:

ctx.beginPath();
ctx.moveTo(50,100);
ctx.lineTo(100,150);
ctx.lineTo(150,100);
ctx.lineTo(100,50);
ctx.closePath();
ctx.stroke();
Otteniamo il quadrilatero ABCD, in quanto la penna torna al punto di partenza e il disegno si chiude (l'ultima linea DA, in quanto siamo partiti dal punto A)

Se invece tralasciamo l'istruzione ctx.closePath(); otteniamo la spezzata ABCD (l'ultima linea CD)

Dunque l'istruzione closePath() fa in modo che la penna ritorni indietro all'inizio del percorso subito dopo beginPath().
Se il percorso gi chiuso, ad esempio quando abbiamo un solo segmento oppure la penna gi tornata al punto iniziale, la funzione non fa nulla.

NOTA BENE -Il metodo fill() chiude automaticamente ogni percorso aperto e non necessario chiamare il metodo close(), come si vede dal seguente esempio

SECONDO ESEMPIO     

FIGURA 1
FIGURA 2
FIGURA 3

Siano dati i punti

  1. A(50,100)
  2. B(100,150)
  3. C(150,100)
  4. D(163,65)
  5. E(100,50)
Se usiamo il codice
ctx.moveTo(50,100)
ctx.lineTo(100,150);
ctx.lineTo(150,100);
ctx.lineTo(163,65);
ctx.lineTo(100,50);
ctx.closePath();
ctx.stroke();
Se usiamo il codice
ctx.moveTo(50,100)
ctx.lineTo(100,150);
ctx.lineTo(150,100);
ctx.lineTo(163,65);
ctx.lineTo(100,50);
ctx.fill();
ctx.stroke();


Come si vede dalla figura numero 3, se non si inserisce il metodo closePath(), il poligono viene colorato all'interno, ma manca l'ultimo lato (il latoEA)

 


Vi invitiamo, se volete provare il metodo beginPath(), a visionare la sezione

PROVA TU - METODO closePath()

 


 

Precedente - Successivo

IN EVIDENZA DAL SITO

 







CALCOLATRICE
SCIENTIFICA



CON SPIEGAZIONI
ED ESEMPI

 




TARTAMONDO - PER BAMBINI




AREA GIOCHI

 

 

 

 

 





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