Μέθοδος closePath

Η μέθοδος closePath κλείνει αυτόματα ένα σχήμα που σχεδιάστηκε με τη μέθοδο lineTo, σχεδιάζοντας μια ευθεία γραμμή από το τελικό σημείο προς το αρχικό. Εάν το σχήμα ήταν ήδη κλειστό ή είναι απλώς ένα σημείο, τότε η μέθοδος δεν κάνει τίποτα.

Σύνταξη

context.closePath();

Παράδειγμα

Αρχικά, ας σχεδιάσουμε δύο γραμμές, χωρίς να τις κλείσουμε μέσω της closePath:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();

Παράδειγμα

Τώρα ας κλείσουμε αυτές τις δύο γραμμές σε ένα σχήμα μέσω της closePath, λαμβάνοντας έτσι ένα τρίγωνο:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.closePath(); // κλείνουμε τις γραμμές σε σχήμα
ctx.stroke();

Παράδειγμα

Ας σχεδιάσουμε ένα τετράγωνο, αντί για την τελευταία γραμμή κλείνοντας το σχήμα μέσω της closePath:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath(); // κλείνουμε τις γραμμές σε σχήμα
ctx.stroke();

Δείτε επίσης

μέθοδος fill,
που γεμίζει το σχήμα με ένα δεδομένο χρώμα