Κοординάτες HTML Canvas

Συντεταγμένες canvas

Το canvas είναι μια δυάδισια κλίβανα.

Οι συντεταγμένες του πάνω αριστερού γωνιακού σημείου του canvas είναι (0,0).

Στο προηγούμενο κεφάλαιο χρησιμοποιήσαμε τη μέθοδο: fillRect(0,0,150,75).

Τι σημαίνει αυτό: Ξεκινάμε τη σχεδίαση ενός ορθογώνιου 150x75 pixel από το όριο του αριστερού άνω γωνιακού σημείου (0,0).

Παράδειγμα συντεταγμένων

Μπορείτε να δείτε τις συντεταγμένες x και y του παρακάτω ορθογώνιου αν τοποθετήσετε το ποντίκι σας πάνω του:

Σχεδιάστε γραμμή

Για να σχεδιάσουμε μια ευθεία γραμμή στο canvas, χρησιμοποιήστε τις παρακάτω μεθόδους:

• moveTo(x,y) - Ορίζει το αρχικό σημείο της γραμμής
• lineTo(x,y- Ορίζει το τέλος της γραμμής

Για να σχεδιάσουμε τη γραμμή, πρέπει να χρησιμοποιήσουμε έναν από τους τρόπους χρώματος, όπως το stroke().

Παράδειγμα

Ορίζουμε τον αρχικό σημείο στο (0,0) και το τελικό σημείο στο (200,100). Στη συνέχεια, σχεδιάζουμε τη γραμμή με τη μέθοδο stroke().

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

Προσπαθήστε το προσωπικά

Σχεδιάστε έναν κύκλο

Για να σχεδιάσουμε έναν κύκλο στο canvas, χρησιμοποιήστε τις παρακάτω μεθόδους:

• beginPath() - Έναρξη ενός δρόμου
• arc(x,y,r,startangle,endangle- Δημιουργία αρίων/κривιλιών

Για να δημιουργήσουμε έναν κύκλο με τη μέθοδο arc(): ορίστε το αρχικό γωνιακό σημείο σε 0, το τελικό γωνιακό σημείο σε 2 * Math.PI. Οι παραμέτρους x και y ορίζουν τις συντεταγμένες του κέντρου του κύκλου. Η παράμετρος r ορίζει το πλάτος του κύκλου.

Παράδειγμα

Ορίζουμε έναν κύκλο χρησιμοποιώντας τη μέθοδο arc(). Στη συνέχεια, σχεδιάζουμε τον κύκλο με τη μέθοδο stroke().

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Προσπαθήστε το προσωπικά

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

Πλήρες εγχειρίδιο αναφορών Canvas για το CodeW3C.com