Η HTML5 <canvas> ετικέτα

Η νέα ετικέτα είναι ένα HTML5 <canvas> ετικέτα δεν είναι παρούσα σε προηγούμενες εκδόσεις, που μπορούν να χρησιμοποιηθούν για τη λήψη και την εργασία με γραφικά.

Η <canvas> ετικέτα χρειάζεται μια υποστήριξη scripting, η γλώσσα, όπως η JavaScript για να λειτουργήσει σωστά και να εκτελέσει πλήρως τις δυνατότητές της.

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

Προϋπόθεση

Ως μια απόλυτη καινοτομία στην καλύτερη καμβά δεν υποστηρίζεται από όλους τους browsers, οπότε είναι πιθανό ότι δεν είναι τα παραδείγματα επίδειξης σε αυτό το άρθρο εμφανίζονται σωστά.
Η δοκιμή πραγματοποιήθηκε με το Google Chrome, στον οποίο δεν έχουν βιώσει κανένα πρόβλημα.

Χρησιμοποιήστε την ετικέτα <canvas>

Η κοινή χρήση της ετικέτας Canvas είναι αρκετά απλή και δεν διαφέρει από άλλες ετικέτες HTML.
Τυπικά Canvas είναι ένα απλό δοχείο και, ως τέτοια, έχει μια ετικέτα ανοίγματος (<canvas>) και το κλείσιμο (</ Canvas>):

 <canvas id="esempio" width="196" height="96">

 





 Στοιχείο που δεν υποστηρίζονται







 </ Canvas>

Αν οι διαστάσεις που αναφέρονται ρητά (χρησιμοποιώντας το πλάτος και το ύψος χαρακτηριστικά) το μέγεθος ανατεθεί στον περιέκτη είναι η προεπιλογή, ένα βασικό ορθογώνιο με ύψος 300 και 150.
Το χαρακτηριστικό id, φυσικά, δεν είναι απαραίτητο, αλλά, κατά τη γνώμη μου, είναι πάντα μια καλή ιδέα να καλέσει για να έχουν μια μοναδική αναφορά για κάθε αντικείμενο που χρησιμοποιείται στη σελίδα.

Το οριοθετημένο τμήμα κειμένου από <canvas> και </ καμβά> να εκπροσωπεί το σημείωμα δείχνει πότε το γραφικό δεν υποστηρίζεται από το πρόγραμμα περιήγησής σας.

Πριν ξεκινήσουμε με τις λεπτομέρειες εφαρμογής δοκιμή των δυνατοτήτων του καμβά με ένα απλό κώδικα για την ανάλυση έμβιων:

 <canvas id="bandierina" width="180"> ύψος = "100"> Δεν υποστηρίζεται </ Canvas>







 <script type="text/javascript">







 var καμβά = document.getElementById («σημαία»)?







 var c = canvas.getContext ('2 d ')?







 c.fillStyle = "# FF0000"?







 c.fillRect (0,0,180,100)?







 c.fillStyle = "# FFFFFF"?







 c.fillRect (0,0,120,100)?







 c.fillStyle = '# 00FF00 »?







 c.fillRect (0,0,60,100)?







 </ Script>

Σε αυτή τη σελίδα μπορείτε να δείτε το αποτέλεσμα αυτού του κώδικα (για να δείτε το αποτέλεσμα σωστά, θα πρέπει να έχετε, για μια ακόμη φορά, ένα πρόγραμμα περιήγησης που υποστηρίζει HTML 5).

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

 / / Δημιουργήστε το στοιχείο καμβά με ID







 var καμβά = document.getElementById («σημαία»)?









 / / Δημιουργήστε ένα νέο δισδιάστατο αντικείμενο πάνω στον καμβά







 var c = canvas.getContext ('2 d ')?

Javascript μέθοδος getElementById αποθηκεύει το αντικείμενο σε μια μεταβλητή καμβά, με την τιμή του πεδίου id της? GetContext ('2 d ') παίρνει το πλαίσιο, ή ένα αντικείμενο που προσφέρει ο προγραμματιστής διάφορες μεθόδους για να συνεργαστεί με τον καμβά ως επιθυμητή (στην περίπτωσή μας θέλετε να εργαστείτε με τα δισδιάστατα γραφικά λειτουργιών, δηλαδή, 2D).

Στις σελίδες που ακολουθούν θα σας αναφέρουμε κάποιες βασικές λειτουργίες χρήσιμες για τον προγραμματιστή προτίθεται να κάνει χρήση του καμβά.

• <<
• 1
• 2
• 3
• 4
• 5
• >>