Σχεδίαση γραμμών μέσω canvas σε JavaScript
Ας ξεκινήσουμε με κάτι απλό - τη σχεδίαση γραμμών. Για να καταλάβετε πώς γίνεται αυτό, φανταστείτε ότι έχετε ένα φύλλο χαρτί και ένα μολύβι. Μπορείτε να σχεδιάσετε σε αυτό το φύλλο, ή μπορείτε απλά να μετακινείτε το μολύβι στο επιθυμητό σημείο χωρίς να σχεδιάζετε.
Παρομοίως λειτουργεί και το JavaScript: έχει
ένα μολύβι (ή πένα για σχεδίαση), που μπορείτε να μετακινήσετε στην επιθυμητή
θέση χρησιμοποιώντας τη μέθοδο
moveTo, και να σχεδιάσετε - χρησιμοποιώντας τη
μέθοδο lineTo.
Και οι δύο μέθοδοι δέχονται ως παραμέτρους ένα σημείο,
στο οποίο θα μετακινηθεί η άκρη της πένας - η πρώτη παράμετρος
είναι η συντεταγμένη στον οριζόντιο άξονα, και η δεύτερη - στον
κάθετο. Η αρχή των αξόνων - το σημείο 0,
0 - είναι η επάνω αριστερή γωνία του στοιχείου.
Όταν η πένα μετακινείται στο επιθυμητό σημείο -
η μέθοδος moveTo απλά μετακινεί, ενώ
η lineTo κατά τη διάρκεια της μετακίνησης σχεδιάζει
μια γραμμή από την τρέχουσα θέση της πένας μέχρι το σημείο
στο οποίο θα μετακινηθεί.
Ωστόσο, αν εκτελέσετε τον παραπάνω κώδικα
- τίποτα δεν θα συμβεί: είναι απαραίτητο να γράψετε
δύο ακόμη εντολές: η πρώτη εντολή beginPath
πρέπει να καθοριστεί πριν από την έναρξη της σχεδίασης
της γραμμής, και η δεύτερη εντολή stroke πρέπει
να κληθεί μετά από όλους τους συνδυασμούς moveTo
και lineTo για να εμφανιστεί η γραμμή.
Λοιπόν, ας γράψουμε έναν λειτουργικό κώδικα για σχεδίαση γραμμής:
Ας σχεδιάσουμε μια γραμμή
<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.stroke();
:
Ας σχεδιάσουμε ένα πουλάκι
<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();
:
Ας σχεδιάσουμε ένα τρίγωνο
<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.lineTo(50, 50);
ctx.stroke();
:
Ας σχεδιάσουμε ένα τετραγωνάκι
<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();
:
Κλείσιμο σχημάτων
Για τη σχεδίαση ενός κλειστού σχήματος δεν είναι απαραίτητο
να σχεδιάσετε όλες τις γραμμές - η τελευταία γραμμή μπορεί
να σχεδιαστεί αυτόματα και να κλείσει το σχήμα.
Για αυτό, πριν από τη μέθοδο stroke θα πρέπει
να καλέσετε τη μέθοδο closePath.
Αυτή η μέθοδος προσπαθεί να κλείσει το σχήμα, σχεδιάζοντας μια ευθεία γραμμή από το τελικό σημείο στο αρχικό. Εάν το σχήμα ήταν ήδη κλειστό ή είναι απλά ένα σημείο, τότε η μέθοδος δεν κάνει τίποτα.
Ας σχεδιάσουμε ένα τρίγωνο, χρησιμοποιώντας την closePath:
<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.lineTo(50, 50); - αυτό το βήμα παραλείπουμε
ctx.closePath();
ctx.stroke();
:
Γέμισμα σχημάτων
Αντί για τη μέθοδο stroke μπορείτε να χρησιμοποιήσετε
τη μέθοδο fill - σε αυτήν την περίπτωση το σχήμα δεν είναι απαραίτητο
να είναι πλήρως κλειστό - θα γεμίσει
και έτσι:
<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.lineTo(50, 50); - αυτό το βήμα παραλείπουμε
//ctx.closePath(); - και αυτό επίσης
ctx.fill();
:
