Σχεδίαση γραμμών μέσω canvas σε JavaScript

Ας ξεκινήσουμε με κάτι απλό - τη σχεδίαση γραμμών. Για να καταλάβετε πώς γίνεται αυτό, φανταστείτε ότι έχετε ένα φύλλο χαρτί και ένα μολύβι. Μπορείτε να σχεδιάσετε σε αυτό το φύλλο, ή μπορείτε απλά να μετακινείτε το μολύβι στο επιθυμητό σημείο χωρίς να σχεδιάζετε.

Παρομοίως λειτουργεί και το JavaScript: έχει ένα μολύβι (ή πένα για σχεδίαση), που μπορείτε να μετακινήσετε στην επιθυμητή θέση χρησιμοποιώντας τη μέθοδο moveTo, και να σχεδιάσετε - χρησιμοποιώντας τη μέθοδο lineTo.

Και οι δύο μέθοδοι δέχονται ως παραμέτρους ένα σημείο, στο οποίο θα μετακινηθεί η άκρη της πένας - η πρώτη παράμετρος είναι η συντεταγμένη στον οριζόντιο άξονα, και η δεύτερη - στον κάθετο. Η αρχή των αξόνων - το σημείο 0, 0 - είναι η επάνω αριστερή γωνία του στοιχείου.

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

Ωστόσο, αν εκτελέσετε τον παραπάνω κώδικα - τίποτα δεν θα συμβεί: είναι απαραίτητο να γράψετε δύο ακόμη εντολές: η πρώτη εντολή beginPath πρέπει να καθοριστεί πριν από την έναρξη της σχεδίασης της γραμμής, και η δεύτερη εντολή stroke πρέπει να κληθεί μετά από όλους τους συνδυασμούς moveTo και lineTo για να εμφανιστεί η γραμμή.

Λοιπόν, ας γράψουμε έναν λειτουργικό κώδικα για σχεδίαση γραμμής:

Ας σχεδιάσουμε μια γραμμή

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

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

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

Результат:

Ας σχεδιάσουμε ένα πουλάκι

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

javascriptlet 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();

Результат:

Ας σχεδιάσουμε ένα τρίγωνο

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

javascriptlet 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();

Результат:

Ας σχεδιάσουμε ένα τετραγωνάκι

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

javascriptlet 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:

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

javascriptlet 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 - σε αυτήν την περίπτωση το σχήμα δεν είναι απαραίτητο να είναι πλήρως κλειστό - θα γεμίσει και έτσι:

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

javascriptlet 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();

Результат:

Πρακτικές ασκήσεις