Προγραμματισμός

* Γνώση Υπολογιστών >> Προγραμματισμός >> JavaScript Προγραμματισμός

Ένας σύντομος οδηγός για την HTML 5 Canvas Animation

Ένα από τα πιο συναρπαστικά συντακτικά χαρακτηριστικά κυκλοφόρησε με HTML5 είναι το " » στοιχείο . Η στοιχείο δημιουργεί μια επιφάνεια σχεδίασης . Με πολλούς τρόπους , είναι ισοδύναμο του προγραμματιστή από τον καμβά του ζωγράφου , παρέχοντας ένα κενό ορθογώνιο σε μια ιστοσελίδα που μπορεί να κλιμακωθεί σε οποιοδήποτε μέγεθος . JavaScript λειτουργεί στη συνέχεια όπως το χρώμα , η οποία σας επιτρέπει να σχεδιάσετε ή να εμψυχώσει τίποτα πάνω στον καμβά . Η πιο προκλητική πτυχή της δημιουργίας ενός animation HTML5 καμβά δεν είναι η κατανόηση της ίδιας της στοιχείο , αλλά ξέρει πώς να " ζωγραφίσει " JavaScript κινούμενα σχέδια πάνω του . Τα πράγματα που θα χρειαστείτε
πρόγραμμα περιήγησης στο Internet που υποστηρίζουν HTML5
Η Εμφάνιση Περισσότερες οδηγίες
Η

1 Ανοίξτε ένα νέο κενό έγγραφο και τίτλος «καμβά - animation.html . " Άνοιγμα νέο έγγραφο σας σε μια εφαρμογή την ανάπτυξη Web μπορεί να κάνει ευκολότερη επεξεργασία , αλλά αν δεν έχετε ένα απλά χρησιμοποιήστε μια βασική εφαρμογή επεξεργασίας κειμένου . 2

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

HTML5 Canvas Animation .
εικόνων 3

Προσθήκη

? και ετικέτες στο σώμα του εγγράφου σας . Η ετικέτα ενότητα είναι νέα στην HTML5 . Ορίζει ενότητες σε ένα έγγραφο Web . Η ετικέτα καμβά ορίζει το ορθογώνιο καμβά που θα χρησιμοποιήσετε για να οικοδομήσουμε JavaScript animation σας . Το ακόλουθο παράδειγμα έχει το ID " animation ", το οποίο θα χρησιμοποιηθεί ως σημείο αναφοράς από JavaScript σας :

HTML5 Canvas Animation

.
Η 4

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

HTML5 Canvas Animation

Sorry, your browser δεν δεν υποστηρίζουν HTML5 και , με τη σειρά του , δεν μπορεί να φορτώσει αυτό το animation .
.
5

" Paint" JavaScript animation σας επάνω στο στοιχείο χρησιμοποιώντας το " getElementById ( ) " μέθοδος για να συνδέσετε scripts σας στον καμβά " animation " ID . Αν δεν έχετε προηγούμενη εμπειρία γραπτώς JavaScript κινούμενα σχέδια , υπάρχουν μια σειρά από παραδείγματα που μπορείτε να δοκιμάσετε παρέχονται στην ενότητα Πόροι του παρόντος άρθρου .
Η
εικόνων

Συναφής σύστασή

Πνευματικά δικαιώματα © Γνώση Υπολογιστών Όλα τα δικαιώματα κατοχυρωμένα