Metodo closePath() con canvas e javascript

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

Foto di Tommaso Bientinesi

Passione per i viaggi e la natura

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
A(50,100)
B(100,150)
C(150,100)
D(163,65)
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)