Αυτό το στοιχείο έχει οφέλη από άλλες τεχνολογίες
Το HTML5 περιλαμβάνει ένα συναρπαστικό στοιχείο που ονομάζεται CANVAS. Έχει πολλές χρήσεις, αλλά για να το χρησιμοποιήσετε θα πρέπει να μάθετε κάποια JavaScript, HTML, και μερικές φορές CSS.
Αυτό κάνει το στοιχείο CANVAS λίγο τρομακτικό για πολλούς σχεδιαστές και στην πραγματικότητα οι περισσότεροι θα αγνοήσουν πιθανώς το στοιχείο έως ότου υπάρχουν αξιόπιστα εργαλεία για να δημιουργηθούν κινούμενα σχέδια και παιχνίδια CANVAS χωρίς να γνωρίζετε το JavaScript.
Τι HTML5 καμβά χρησιμοποιείται για
Το στοιχείο HTML5 CANVAS μπορεί να χρησιμοποιηθεί για πολλά πράγματα που προηγουμένως χρειάστηκε να χρησιμοποιήσετε μια ενσωματωμένη εφαρμογή όπως το Flash για τη δημιουργία:
- δυναμικά γραφικά
- online και offline παιχνίδια
- κινούμενα σχέδια
- διαδραστικό βίντεο και ήχο
Στην πραγματικότητα, ο κύριος λόγος που οι άνθρωποι χρησιμοποιούν το στοιχείο CANVAS είναι επειδή είναι εύκολο να μετατρέψει μια απλή ιστοσελίδα σε μια δυναμική εφαρμογή Ιστού και να μετατρέψει αυτή την εφαρμογή σε μια εφαρμογή για κινητά για χρήση σε smartphones και tablet.
Αν έχουμε Flash, γιατί χρειαζόμαστε καμβά;
Σύμφωνα με την προδιαγραφή HTML5, το στοιχείο CANVAS είναι:
"... ένας καμβάς bitmap που εξαρτάται από την ανάλυση, ο οποίος μπορεί να χρησιμοποιηθεί για την απόδοση γραφημάτων, γραφικών παιχνιδιών, τέχνης ή άλλων οπτικών εικόνων σε κίνηση".Το στοιχείο CANVAS σας επιτρέπει να σχεδιάζετε γραφικά, γραφικά, παιχνίδια, τέχνη και άλλα γραφικά στην ιστοσελίδα σε πραγματικό χρόνο.
Μπορεί να νομίζετε ότι μπορούμε ήδη να το κάνουμε αυτό με το Flash, αλλά υπάρχουν δύο μεγάλες διαφορές μεταξύ CANVAS και Flash:
- Το στοιχείο CANVAS ενσωματώνεται απευθείας στο HTML. Τα σενάρια που αντλούν από αυτό είναι είτε στο HTML είτε σε ένα συνδεδεμένο εξωτερικό αρχείο. Αυτό σημαίνει ότι το στοιχείο CANVAS είναι μέρος του μοντέλου αντικειμένου εγγράφου ή DOM.
- Το Flash είναι ένα ενσωματωμένο εξωτερικό αρχείο. Χρησιμοποιεί είτε το στοιχείο EMBED είτε το OBJECT για εμφάνιση και δεν μπορεί να αλληλεπιδρά άμεσα με τα άλλα στοιχεία HTML. Επειδή το στοιχείο CANVAS είναι μέρος του DOM, μπορεί να αλληλεπιδράσει με το DOM με πολλούς τρόπους.
- Για παράδειγμα, μπορείτε να δημιουργήσετε μια κινούμενη εικόνα που αλλάζει όταν κάποιο άλλο μέρος της σελίδας αλληλεπιδρά με - όπως ένα στοιχείο φόρμας που συμπληρώνεται. Με το Flash, το περισσότερο που θα μπορούσατε να κάνετε είναι να ξεκινήσετε την ταινία Flash ή animation, αλλά με CANVAS θα μπορούσατε να δημιουργήσετε πολλά διαφορετικά εφέ, ακόμα και προσθέτοντας το κείμενο από το πεδίο φόρμας στην κινούμενη εικόνα.
- Το στοιχείο CANVAS υποστηρίζεται από προγράμματα περιήγησης ιστού. Προκειμένου οι χρήστες να χρησιμοποιήσουν πραγματικά το Flash, ο περιηγητής τους πρέπει να έχει εγκαταστήσει το plugin. Αυτό είναι συχνά μια ταλαιπωρία για τους περισσότερους ανθρώπους λόγω παρωχημένων εγκαταστάσεων Flash ή το γεγονός ότι το λειτουργικό τους σύστημα απλά δεν το υποστηρίζει.
- Κάποτε ήταν ότι κάθε πρόγραμμα περιήγησης είχε το plugin εγκατεστημένο, αλλά αυτό δεν συμβαίνει πλέον, και πολλοί ακόμη και αφαιρώντας το plugin λόγω δυσκολιών. Επιπλέον, δεν είναι καν διαθέσιμο στη δημοφιλή πλατφόρμα iOS.
Ο καμβάς είναι χρήσιμος ακόμη και αν δεν έχετε ποτέ σχεδιάσει να χρησιμοποιήσετε το Flash
Ένας από τους κύριους λόγους για τους οποίους το στοιχείο CANVAS είναι τόσο συγκεχυμένο είναι ότι πολλοί σχεδιαστές έχουν συνηθίσει σε έναν εντελώς στατικό ιστό. Οι εικόνες μπορεί να είναι κινούμενες, αλλά αυτό γίνεται με το GIF και βεβαίως μπορείτε να ενσωματώσετε το βίντεο στις σελίδες αλλά και πάλι, είναι ένα στατικό βίντεο που απλά κάθεται στη σελίδα και ίσως ξεκινά ή σταματά λόγω αλληλεπίδρασης, αλλά αυτό είναι όλο.
Το στοιχείο CANVAS σας επιτρέπει να προσθέσετε τόσο πολύ περισσότερη διαδραστικότητα στις ιστοσελίδες σας, διότι τώρα μπορείτε να ελέγχετε δυναμικά τα γραφικά, τις εικόνες και το κείμενο με μια γλώσσα δέσμης ενεργειών. Το στοιχείο CANVAS σάς βοηθά να μετατρέπετε εικόνες, φωτογραφίες, διαγράμματα και γραφήματα σε κινούμενα στοιχεία.
Πότε να εξετάσετε τη χρήση του στοιχείου καμβά
Το κοινό σας θα πρέπει να είναι το πρώτο σας μέλημα όταν αποφασίζετε αν θα χρησιμοποιήσετε το στοιχείο CANVAS.
Αν το κοινό σας χρησιμοποιεί κατά κύριο λόγο τα Windows XP και IE 6, 7 ή 8, τότε η δημιουργία δυναμικής δυναμικής καμβά θα είναι άσκοπη αφού αυτά τα προγράμματα περιήγησης δεν την υποστηρίζουν.
Εάν δημιουργείτε μια εφαρμογή που θα χρησιμοποιείται μόνο σε υπολογιστές με Windows, τότε το Flash μπορεί να είναι το καλύτερο στοίχημά σας. Μια εφαρμογή που θα χρησιμοποιηθεί σε υπολογιστές Windows και Mac θα μπορούσε να επωφεληθεί από μια εφαρμογή Silverlight.
Ωστόσο, αν η εφαρμογή σας πρέπει να προβάλλεται σε κινητές συσκευές (Android και iOS) καθώς και σε σύγχρονους επιτραπέζιους υπολογιστές (ενημερώνεται στις τελευταίες εκδόσεις του προγράμματος περιήγησης), τότε η χρήση του στοιχείου CANVAS είναι μια καλή επιλογή.
Λάβετε υπόψη ότι η χρήση αυτού του στοιχείου σας επιτρέπει να έχετε εναλλακτικές επιλογές όπως στατικές εικόνες για παλαιότερα προγράμματα περιήγησης που δεν το υποστηρίζουν.
Ωστόσο, δεν συνιστάται η χρήση του καμβά HTML5 για τα πάντα. Δεν θα πρέπει ποτέ να το χρησιμοποιήσετε για πράγματα όπως το λογότυπό σας, τον τίτλο ή τη ναυσιπλοΐα (αν και η χρήση του για να ζωντανέψει ένα μέρος από οποιοδήποτε από αυτά θα ήταν εντάξει).
Σύμφωνα με τις προδιαγραφές, θα πρέπει να χρησιμοποιήσετε τα στοιχεία που είναι πιο κατάλληλα για αυτό που προσπαθείτε να χτίσετε. Έτσι, χρησιμοποιώντας το στοιχείο HEADER μαζί με εικόνες και κείμενο προτιμάται το στοιχείο CANVAS για την κεφαλίδα και το λογότυπό σας.
Επίσης, εάν δημιουργείτε μια ιστοσελίδα ή μια εφαρμογή που προορίζεται να χρησιμοποιηθεί σε ένα μη διαδραστικό μέσο, όπως η εκτύπωση, πρέπει να γνωρίζετε ότι το στοιχείο CANVAS που έχει ενημερωθεί δυναμικά ενδέχεται να μην εκτυπώνει όπως αναμένετε. Μπορεί να έχετε μια εκτύπωση του τρέχοντος περιεχομένου ή του εναλλασσόμενου περιεχομένου.