Σχήματα στο Canvas HTML

παράδειγμα

Παράδειγμα 1

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

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

Γραμμές ζωγραφίζοντας στο Canvas

Η γραμμή ζωγραφίζεται χρησιμοποιώντας το δρομολόγιο του canvas:

Η μεθόδος

beginPath() Η μεθόδος ξεκινάει μια νέα διαδρομή. Δεν ζωγραφίζει τίποτα, απλώς ορίζει μια νέα διαδρομή.

moveTo() Ορίζει το σημείο εκκίνησης της γραμμής. Δεν ζωγραφίζει τίποτα, απλώς ορίζει ένα σημείο εκκίνησης.

lineTo() Η μεθόδος ορίζει το τέλος της γραμμής. Δεν ζωγραφίζει τίποτα, απλώς ορίζει ένα τέλος.

stroke() Η μεθόδος ζωγραφίζει γραμμές. Η προεπιλεγμένη χρώμα γραφής είναι μαύρο.

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

Παράδειγμα 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

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

Παράδειγμα 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

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

Συμβουλή

Αν θέλετε να σχεδιάσετε ορθογώνιο, δεν χρειάζεται να σχεδιάσετε 4 γραμμές.

Στο επόμενο κεφάλαιο, θα μάθετε να χρησιμοποιείτε drawRect() μεθόδους για να σχεδιάσετε ορθογώνιο.

ιδιότητα strokeStyle

strokeStyle η ιδιότητα ορίζει τον στυλ που χρησιμοποιείται για το κύριο χρώμα γραφής κατά τη διάρκεια της απόδοσης στο canvas.

πρέπει να καλείτε stroke() προτού την ρυθμίσετε.

παράδειγμα

ctx.beginPath();
// Ορισμός ορθογώνιου
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// Ορισμός τριγώνου
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

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

Δείτε επίσης:

Πλήρης Εκπαιδευτικός Οδηγός για το Canvas του CodeW3C.com