Μέθοδος HTML canvas closePath()

Ορισμός και χρήση

closePath() Η μέθοδος δημιουργίας διαδρομής από το τρέχον σημείο στο σημείο εκκίνησης.

Συμβουλή:Χρησιμοποιήστε stroke() Η μέθοδος για να ζωγραφίσετε ακριβή διαδρομή στο canvas.

Συμβουλή:Χρησιμοποιήστε fill() Χρησιμοποιήστε τη μέθοδο για να γεμίσετε την εικόνα (προεπιλεγμένο είναι το μαύρο). Χρησιμοποιήστε fillStyle Χρησιμοποιήστε ιδιότητες για να γεμίσετε άλλο χρώμα/διαβάθμιση.

Παραδείγματα

Παράδειγμα 1

Δημιουργήστε μια διαδρομή, η μορφή της είναι η λέξη L, και στη συνέχεια σχεδιάστε γραμμές για να επιστρέψετε στο σημείο εκκίνησης:

Ο περιηγητής σας δεν υποστηρίζει την ετικέτα HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();

Δοκιμάστε το προσωπικά

Συμβουλή:Περισσότερα παραδείγματα παρέχονται στο κάτω μέρος της σελίδας.

Γλώσσα

context.closePath();

Περισσότερα παραδείγματα

Παράδειγμα 2

Χρησιμοποιήστε το πράσινο ως χρώμα γεμίσματος:

Ο περιηγητής σας δεν υποστηρίζει την ετικέτα HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="green";
ctx.fill();

Δοκιμάστε το προσωπικά

Υποστήριξη προγράμματος περιήγησης

Τα αριθμήματα στη τάβλη αναφέρονται στην έκδοση του πρώτου προγράμματος περιήγησης που υποστηρίζει πλήρως το χαρακτηριστικό.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Σημείωση:Οι εκδόσεις του Internet Explorer 8 και παλιότερες δεν υποστηρίζουν το στοιχείο <canvas>.