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