Όταν χρησιμοποιούμε το στοιχείο του καμβά για να σχεδιάσουμε δεν περιοριζόμαστε μόνο στην κατάρτιση ορθογώνιων μορφών, μπορούμε επίσης να σχεδιάσουμε χρησιμοποιώντας συντεταγμένες και τις λεγόμενες διαδρομές που είναι διαδρομές με τις οποίες θα δείξουμε στο στοιχείο του καμβά που και πώς να δείξουμε το σχέδιό μας.
Οι δυνατότητες που μας δίνει είναι εντυπωσιακές, διότι με τους απαραίτητους αλγορίθμους μπορούμε να κάνουμε συνθέσεις χωρίς όριο, να σχεδιάζουμε οποιοδήποτε τύπο φιγούρας στο HTML5 και μαζί του, μέχρι να επιτευχθεί σε συνδυασμό με άλλα στοιχεία αποτελέσματα που ποτέ δεν φανταζόταν σε προηγούμενες προδιαγραφές της γλώσσας.
Χρήση διαδρομής
Όπως αναφέρθηκε, η διαδρομή είναι αυτό που θα μας επιτρέψει να υποδείξουμε στον καμβά τις συντεταγμένες με τις οποίες πρέπει να γίνει το σχέδιο, με αυτές τις συντεταγμένες ο καμβάς θα ξέρει πού να τραβήξει τις αντίστοιχες γραμμές και τελικά με τη σωστή συσσώρευση γραμμών μπορούμε να επιτύχουμε οποιοδήποτε τύπο σχήματος.
Πριν προχωρήσουμε στα αντίστοιχα παραδείγματα θα πρέπει να γνωρίζουμε ποιες μέθοδοι είναι διαθέσιμες για το στοιχείο καμβά και τη διαδρομή, ας δούμε την παρακάτω λίστα παρακάτω:
- beginPath (): Αυτή η μέθοδος μας επιτρέπει να ξεκινήσουμε μια νέα διαδρομή.
- closePath (): Αυτή η μέθοδος επιχειρεί να κλείσει την τρέχουσα διαδρομή σχεδιάζοντας μια γραμμή από το τέλος της τελευταίας γραμμής στις αρχικές συντεταγμένες.
- fill (): Συμπληρώστε τις φόρμες που περιγράφονται από την υποδιαδρομή.
- isPointInPath (x, y): Επιστρέφει true αν το καθορισμένο σημείο βρίσκεται μέσα στο σχήμα που σύρεται από την τρέχουσα διαδρομή.
- lineTo (x, y): Σχεδιάζει μια υποδιαδρομή στις καθορισμένες συντεταγμένες.
- moveTo (x, y): Μας επιτρέπει να προχωρήσουμε στις καθορισμένες συντεταγμένες χωρίς να σχεδιάσουμε μια υποδιαδρομή .
- Rect (x, y, w, h): Σχεδιάστε ένα ορθογώνιο, του οποίου οι συντεταγμένες στην επάνω αριστερή γωνία αντιστοιχούν στο (x, y) το πλάτος του αντιστοιχεί στο aw και το ύψος του αντιστοιχεί σε h.
- εγκεφαλικό επεισόδιο (): Σχεδιάστε τις εξωτερικές γραμμές των σχημάτων που σχεδιάζονται από την υπο-διαδρομή.
• Καλούμε τη μέθοδο beginPath .
• Μεταβαίνουμε στην αρχική θέση χρησιμοποιώντας τη μέθοδο moveTo .
• Σχεδιάζουμε τις υπο-διαδρομές με τις μεθόδους lineTo κ.λπ.
• Προαιρετικά μπορούμε να καλέσουμε τη μέθοδο closePath .
• Τελικά καλούμε τις μεθόδους πλήρωσης ή stoke .
Έχουμε ήδη την συνιστώμενη εντολή να αρχίσετε να σχεδιάζουμε τώρα βλέπουμε τον αντίστοιχο κώδικα σε HTML5 .
Παράδειγμα καμβά {οριοθέτηση: λεπτό συμπαγές μαύρο} σώμα> * {float: αριστερά;} Το πρόγραμμα περιήγησής σας δεν είναι συμβατό με τον canvas var ctx = document.getElementById ("καμβάς"). ctx.fillStyle = "κίτρινο"; ctx.strokeStyle = "μαύρο"; ctx.lineWidth = 4; ctx.beginPath (); ctx.moveTo (10, 10). ctx.lineTo (110, 10). ctx.lineTo (110, 120). ctx.closePath (); ctx.fill (); ctx.beginPath (); ctx.moveTo (150, 10). ctx.lineTo (200, 10). ctx.lineTo (200, 120). ctx.lineTo (190, 120). ctx.fill (); ctx.stroke (); ctx.beginPath (); ctx.moveTo (250, 10). ctx.lineTo (250, 120). ctx.stroke (); Όπως βλέπουμε, γίνονται δύο κλήσεις στο beginPath (), με το οποίο καταφέρουμε να ξεκινήσουμε τις περιοχές σχεδίασης στον καμβά, στη συνέχεια με το moveTo () θέτουμε τις αρχικές θέσεις και το υπόλοιπο σχεδιάζουμε.
Ας δούμε πώς φαίνεται το σχέδιό μας στο πρόγραμμα περιήγησης:
Με αυτό ολοκληρώνουμε το σεμινάριο, όχι μόνο γνωρίζοντας τις διαφορετικές μεθόδους και τα πρόσθετα εργαλεία που μπορούμε να χρησιμοποιήσουμε, αλλά και τονίζοντας ότι δεν είναι πλέον μόνο ορθογώνια σχήματα που μπορούμε να σχεδιάσουμε.
- 0
Αρθρο