Τελευταία ενημέρωση: 28.04.2016

Το CSS παρέχει δυνατότητες τοποθέτησης στοιχείων, που σημαίνει ότι μπορούμε να τοποθετήσουμε ένα στοιχείο σε μια συγκεκριμένη θέση στη σελίδα.

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

static : τυπική τοποθέτηση στοιχείων, προεπιλεγμένη τιμή

απόλυτη : το στοιχείο είναι τοποθετημένο σε σχέση με τα όρια του στοιχείου κοντέινερ εάν η ιδιότητα θέσης του δεν είναι στατική

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

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

Δεν πρέπει να εφαρμόζετε ταυτόχρονα την ιδιότητα float και οποιονδήποτε τύπο τοποθέτησης εκτός από τον στατικό (δηλαδή τον προεπιλεγμένο τύπο) σε ένα στοιχείο.

Απόλυτη τοποθέτηση

Η περιοχή προβολής του προγράμματος περιήγησης έχει επάνω, κάτω, δεξιά και αριστερή άκρη. Κάθε μία από αυτές τις τέσσερις ακμές έχει μια αντίστοιχη ιδιότητα CSS: αριστερά, δεξιά, πάνω και κάτω. Οι τιμές για αυτές τις ιδιότητες καθορίζονται σε pixel, ems ή ποσοστά. Δεν είναι απαραίτητο να ορίσετε τιμές και για τις τέσσερις πλευρές. Κατά κανόνα, ορίζονται μόνο δύο τιμές - η εσοχή από την επάνω άκρη και η εσοχή από την αριστερή άκρη αριστερά.

Διάταξη μπλοκ σε HTML5 .κεφαλίδα ( θέση: απόλυτη; αριστερά: 100 εικονοστοιχεία; επάνω: 50 εικονοστοιχεία; πλάτος: 430 εικονοστοιχεία; ύψος: 100 εικονοστοιχεία; χρώμα φόντου: rgba(128, 0, 0, 0.5); )

ΓΕΙΑ ΣΟΥ ΚΟΣΜΕ

Εδώ είναι ένα στοιχείο div με απόλυτη τοποθέτησηθα είναι 100 pixel στα αριστερά του περιγράμματος της θύρας προβολής και 50 από το κάτω μέρος.

Δεν είναι τόσο σημαντικό μετά από αυτό το στοιχείο div να υπάρχουν κάποια άλλα στοιχεία. Αυτό το μπλοκ div θα τοποθετηθεί σε κάθε περίπτωση σε σχέση με τα όρια της θύρας προβολής του προγράμματος περιήγησης.

Εάν ένα στοιχείο με απόλυτη τοποθέτηση βρίσκεται σε άλλο κοντέινερ, το οποίο, με τη σειρά του, έχει τιμή ιδιότητας θέσης όχι ίση με στατική, τότε το στοιχείο τοποθετείται σε σχέση με τα όρια του κοντέινερ:

Τοποθέτηση σε HTML5 .outer ( θέση: απόλυτη; αριστερά: 80 εικονοστοιχεία; επάνω: 40 εικονοστοιχεία; πλάτος: 430 εικονοστοιχεία; ύψος: 100 εικονοστοιχεία; περίγραμμα: 1 εικονοστοιχεία στερεά #cccc; ) .inner( θέση: απόλυτη; αριστερά: 80 εικονοστοιχεία; επάνω: 40 εικονοστοιχεία; πλάτος : 50 εικονοστοιχεία, ύψος: 50 εικονοστοιχεία, χρώμα φόντου: rgba (128, 0, 0, 0,5); )

Σχετική τοποθέτηση

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

Τοποθέτηση σε HTML5 .outer ( θέση: σχετική; αριστερά: 80 εικονοστοιχεία; επάνω: 40 εικονοστοιχεία; πλάτος: 300 εικονοστοιχεία; ύψος: 100 εικονοστοιχεία; περίγραμμα: 1 εικονοστοιχεία στερεά #ccc; ) .inner( θέση: απόλυτη; αριστερά: 80 εικονοστοιχεία; επάνω: 40 εικονοστοιχεία; πλάτος : 50 εικονοστοιχεία, ύψος: 50 εικονοστοιχεία, χρώμα φόντου: rgba (128, 0, 0, 0,5); )

ιδιότητα z-index

Από προεπιλογή, όταν δύο στοιχεία έχουν το ίδιο περίγραμμα, το στοιχείο που ορίστηκε τελευταίο στη σήμανση html εμφανίζεται πάνω στο άλλο. Ωστόσο, η ιδιότητα z-index σας επιτρέπει να αλλάξετε τη σειρά των στοιχείων όταν επικαλύπτονται. Το ακίνητο παίρνει έναν αριθμό ως αξία. Στοιχεία με μεγαλύτερη τιμή δείκτη z θα εμφανίζονται πάνω από στοιχεία με μικρότερη τιμή δείκτη z.

Για παράδειγμα:

Τοποθέτηση σε σώμα HTML5( περιθώριο:0; padding:0; ) .content( θέση: σχετική; επάνω: 15 εικονοστοιχεία; αριστερά: 20 εικονοστοιχεία; πλάτος: 250 εικονοστοιχεία; ύψος: 180 εικονοστοιχεία; χρώμα φόντου: #eee; περίγραμμα: 1 εικονοστοιχείο συμπαγές #ccc ; ) .redBlock( θέση: απόλυτη; επάνω: 20 εικονοστοιχεία; αριστερά: 50 εικονοστοιχεία; πλάτος: 80 εικονοστοιχεία; ύψος: 80 εικονοστοιχεία; χρώμα φόντου: κόκκινο; ) .blueBlock (θέση: απόλυτη; επάνω: 80 εικονοστοιχεία; αριστερά: 80 εικονοστοιχεία; πλάτος: 80 εικονοστοιχεία ; ύψος: 80 εικονοστοιχεία; χρώμα φόντου: μπλε; )

Τώρα ας προσθέσουμε έναν νέο κανόνα στο στυλ μπλοκ redBlock:

RedBlock (z-index: 100; θέση: απόλυτη; επάνω: 20 px; αριστερά: 50 px; πλάτος: 80 px; ύψος: 80 px; χρώμα φόντου: κόκκινο; )

Εδώ ο δείκτης z είναι 100. Αλλά δεν χρειάζεται να είναι ο αριθμός 100. Δεδομένου ότι το δεύτερο μπλοκ έχει έναν απροσδιόριστο δείκτη z και είναι στην πραγματικότητα μηδέν, για το redBlock μπορούμε να ορίσουμε την ιδιότητα z-index σε οποιαδήποτε τιμή μεγαλύτερη από μηδέν.

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

Η ετικέτα HTML χρησιμοποιείται για την ενσωμάτωση ενός αντικειμένου σε ένα έγγραφο HTML. Χρησιμοποιήστε αυτήν την ετικέτα για να ενσωματώσετε πολυμέσα στις ιστοσελίδες σας.

Χαρακτηριστικά περιεχομένου προγράμματος χειρισμού συμβάντων

Χαρακτηριστικά περιεχομένου χειριστή συμβάντων σας επιτρέπουνγια να καλέσετε ένα σενάριο μέσα από το HTML σας. Το σενάριο επικαλείται όταν συμβαίνει ένα συγκεκριμένο "γεγονός". Κάθε χαρακτηριστικό περιεχομένου χειριστή συμβάντων ασχολείται με διαφορετικό συμβάν.

Ακολουθούν τα τυπικά χαρακτηριστικά περιεχομένου του προγράμματος χειρισμού συμβάντων HTML 5.

• αποβολή
• Ματαίωση
• onblur
• oncanplay
• oncanplaythrough
• onchange
• στο κλικ
• oncontextmenu
• ondblclick
• ondrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• ondragover
• ondragstart
• σταγόνα
• αλλαγή διάρκειας
• ένα άδειασε
• τελείωσε
• ένα λάθος
• επίκεντρο
• onformchange
• onforminput
• εισροή
• μη έγκυρο
• onkeydown
• πατώντας το πλήκτρο
• onkeyup
• σε φορτίο
• φορτωμένα δεδομένα
• onloadedmetdada
• onloadstart
• onmousedown
• onmousemove
• onmouseout
• επί του ποντικιού
• onmouseup
• στον τροχό του ποντικιού
• σε παύση
• στο παιχνίδι
• παίζοντας
• σε εξέλιξη
• onratechnge
• onreadstatechange
• κύλιση
• αναζήτησε
• αναζητώντας
• στην επιλογή
• σε προβολή
• εγκατασταθεί
• κατά την υποβολή
• αναστολή
• έγκαιρη ενημέρωση
• εναλλαγή όγκου
• σε αναμονή

Για μια πλήρη εξήγηση αυτών των ιδιοτήτων, βλ.

Ας πούμε λίγα ακόμα λόγια για την καταχώρηση στοιχείων ActiveX. Συνήθως, η BASIC καταχωρεί ανεξάρτητα όλα τα στοιχεία ActiveX τη στιγμή της δημιουργίας τους. Η εγγραφή συνίσταται στην εκχώρηση ενός ειδικού μοναδικού αναγνωριστικού CLSID στο στοιχείο ActiveX και στην εισαγωγή του στο μητρώο Βάση δεδομένων WindowsΜητρώο πολλών εγγραφών που χαρακτηρίζουν τις ιδιότητες του στοιχείου και τη θέση του. Έχουμε ήδη μιλήσει λίγο για την εγγραφή προγραμμάτων στις ενότητες COM και DCOM. Σχετικά με τη διανομή και τη διάδοση των ανεπτυγμένων στοιχείων ActiveX τοπικό δίκτυοή το Διαδίκτυο, τότε αυτό είναι ένα ξεχωριστό θέμα και θα συζητηθεί παρακάτω.

Ρύζι. 1.11. Χρησιμοποιώντας ένα προ-ενσωματωμένο στοιχείο ελέγχου ActiveX στο πρόγραμμα περιήγησης

Τοποθέτηση στοιχείων ελέγχου ActiveX σε ιστοσελίδες
Τα στοιχεία ελέγχου ActiveX συνδέονται με έγγραφα HTML χρησιμοποιώντας την ετικέτα, η οποία προτείνεται σε ένα από τα πρότυπα εργασίας της κοινοπραξίας W3. Ο σκοπός αυτής της ετικέτας (στο Netscape Navigator) είναι να ενσωματώσει ξένα στοιχεία σε HTML. Ακολουθεί η πλήρης σύνταξη ετικετών:

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

Ακολουθεί μια περιγραφή των χαρακτηριστικών για συγκεκριμένες ετικέτες:
CIASSID=URL
Αυτό το χαρακτηριστικό καθορίζει το αναγνωριστικό κλάσης του στοιχείου ελέγχου που καλείται. Κάθε μονάδα OCX, και επομένως κάθε στοιχείο ελέγχου ActiveX, πρέπει να έχει το δικό της μοναδικό αναγνωριστικό κλάσης. Συνήθως ονομάζεται συντομογραφία CLSID και είναι μια αρκετά μεγάλη συμβολοσειρά δεκαεξαδικών ψηφίων - για παράδειγμα, "017C99A0-8637-llCF-A3A9-00A0C9034 920".

Αλλά γιατί υπάρχει "URL" στη σύνταξη αυτού του χαρακτηριστικού; Το γεγονός είναι ότι η ετικέτα μπορεί να χρησιμοποιηθεί για τη σύνδεση όχι μόνο στοιχείων ελέγχου ActiveX, αλλά και άλλων αντικειμένων προγράμματος, συμπεριλαμβανομένων εκείνων που αναγνωρίζονται όχι από "αναγνωριστικά κλάσης", αλλά με κάποιον άλλο τρόπο.
Για να διασφαλιστεί ότι το πρόγραμμα περιήγησης ασχολείται μόνο με μία σύνταξη, το CLSID ορίζεται σύμφωνα με τους κανόνες της διεύθυνσης URL: η αριστερή πλευρά περιέχει τη λέξη "clsid" και η δεξιά πλευρά περιέχει το πραγματικό αναγνωριστικό κλάσης.
Παράδειγμα: CLASSID="clsid:017C99A0-8637-llCF-A3A9-00A0C9034 920"

CODEBASE=URL
Αυτό το χαρακτηριστικό καθορίζει τη διεύθυνση URL (αυτή τη φορά μια πραγματική, με το πρόθεμα "http:" ή "ftp:"). Μπορείτε να παραθέσετε πολλές διευθύνσεις URL σε αυτό το χαρακτηριστικό σε περίπτωση που ένας από τους διακομιστές δεν είναι διαθέσιμος για κάποιο λόγο.
Το ίδιο χαρακτηριστικό σάς επιτρέπει να καθορίσετε τον απαιτούμενο αριθμό έκδοσης για τα στοιχεία ελέγχου ActiveX.
Για παράδειγμα, αν γράψετε CODEBASE="http://activex.microsoft.com/controls/iexplorer/istock.ocx# Version=4.72,0.1171"
στη συνέχεια μια προσπάθεια να πάρει αυτή η ενότηταΤο ActiveX από το Διαδίκτυο επιχειρείται όχι μόνο όταν δεν βρίσκεται στον υπολογιστή του χρήστη, αλλά και όταν είναι εγκατεστημένο το στοιχείο ελέγχου, αλλά έχει περισσότερα παλιός αριθμόςέκδοση από αυτή που καθορίζεται στο χαρακτηριστικό CODEBASE (Στο παράδειγμά μας, απαιτείται έκδοση όχι παλαιότερη από 4.72.0.1171).

CODETURE=τύπος MIME
TYPE=τύπος MIME
Αυτά τα δύο προαιρετικά χαρακτηριστικά σάς επιτρέπουν να καθορίσετε τους τύπους (από την άποψη του προτύπου MIME) αυτών των αρχείων που αναφέρονται από τα χαρακτηριστικά CLASSID (χαρακτηριστικό CODETYPE) και DATA (χαρακτηριστικό TYPE). Για στοιχεία ελέγχου ActiveX, το χαρακτηριστικό CODETYPE, εάν υπάρχει, πρέπει να οριστεί σε "application/x-oleobject".

DATA=URL
Αυτό το χαρακτηριστικό καθορίζει τη θέση του αρχείου δεδομένων που μπορεί να χρειαστεί για να λειτουργήσει αυτό το στοιχείο ελέγχου. Για ορισμένα στοιχεία ελέγχου ActiveX, αυτό το χαρακτηριστικό απαιτείται. Επιπλέον, χρησιμοποιώντας το χαρακτηριστικό DATA, μπορείτε να συμπεριλάβετε το αρχείο που περιέχει το στοιχείο ελέγχου απευθείας στο αρχείο HTML σε κωδικοποιημένη μορφή.

ΔΗΛΩΝΩ
Συνήθως αυτή η δήλωση είναι κενή. Μπορεί να χρησιμοποιηθεί για να δηλώσει ένα αντικείμενο όταν δεν υλοποιείται, αλλά είναι μόνο μια παράμετρος ενός άλλου αντικειμένου. Ταυτόχρονα, ολόκληρο το σύνολο των χαρακτηριστικών αντικειμένων γράφεται στη μνήμη του προγράμματος περιήγησης σε περίπτωση που κάποιος τα ζητήσει.

ταυτότητα=ID
Απαιτείται για την οργάνωση της αλληλεπίδρασης με άλλα αντικείμενα που έχουν αναγνωριστικό. Μπορεί επίσης να χρησιμοποιηθεί σε ένα σχήμα διευθύνσεων URL (δηλαδή, μπορεί να εμφανίζεται μετά τον χαρακτήρα "#" σε ένα URL).
Μπορείτε να δημιουργήσετε όσες ετικέτες θέλετε με την ίδια τιμή CLASSID, αλλά οι τιμές αναγνωριστικού τους πρέπει να είναι διαφορετικές.

ΟΝΟΜΑ=ID
Ένα προαιρετικό χαρακτηριστικό που μπορεί να χρησιμοποιηθεί κατά την προετοιμασία μιας φόρμας HTML (για αυτό, η ετικέτα πρέπει να βρίσκεται μέσα σε ένα ζεύγος ετικετών ... ). Τα δεδομένα που αποστέλλονται θα περιέχουν τις πληροφορίες που λαμβάνονται από το πρόγραμμα περιήγησης από το αντικείμενο.

ΣΧΗΜΑΤΑ
Αυτό το κενό χαρακτηριστικό καθιστά δυνατή, εντός του παραθύρου που καταλαμβάνει το αντικείμενο στο χώρο του προγράμματος περιήγησης, να επιλέξετε πρόσθετες υποπεριοχές και να τις επισημάνετε ως πρόσθετους συνδέσμους URL (ένα είδος hotspot). Οι συντεταγμένες αυτών των περιοχών και οι διευθύνσεις URL των συνδέσμων για αυτές καθορίζονται χρησιμοποιώντας ετικέτες με ειδικά πρόσθετα χαρακτηριστικά, τα οποία πρέπει να βρίσκονται μεταξύ του AND που αντιστοιχούν σε αυτό.

Σε αυτό το μάθημα θα μάθουμε για την ετικέτα. Ο κύριος σκοπός του είναι να ενσωματώσει ορισμένα αντικείμενα σε μια σελίδα HTML που το πρόγραμμα περιήγησης δεν είναι σε θέση να αναγνωρίσει. Για παράδειγμα, θα μπορούσε να είναι ένα παιχνίδι flash, εικόνες, ήχος, βίντεο, μικροεφαρμογές Java, στοιχεία ActiveX, PDF.

Σύνταξη ετικέτας HTML

... [] ...

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

Χαρακτηριστικά ετικέτας 1. Στοίχιση

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

Για παράδειγμα

Το VALUE μπορεί να λάβει τις ακόλουθες τιμές:

• absmiddle - ευθυγράμμιση στο μέσο της τρέχουσας γραμμής
• γραμμή βάσης , μεσαία στοίχιση με τη γραμμή βάσης της τρέχουσας γραμμής
• κάτω (προεπιλογή) - ευθυγραμμίζει το κάτω περίγραμμα του αντικειμένου με το περιβάλλον κείμενο
• αριστερά - θέση αντικειμένου στα αριστερά
• δεξιά - θέση αντικειμένου στα δεξιά
• επάνω - στοίχιση στο υψηλότερο στοιχείο της τρέχουσας γραμμής

2.Classid

Classid - λέει στο πρόγραμμα περιήγησης ποιο πρόγραμμα, πρόσθετο ή μικροεφαρμογή να φορτώσει. Αυτό το πρόγραμμα θα συνεργαστεί περαιτέρω με το αντικείμενο

Για παράδειγμα

Αντί για διεύθυνση URL, μπορείτε να γράψετε είτε μια απόλυτη είτε μια σχετική διεύθυνση.

3.Δεδομένα

Τα δεδομένα είναι το πιο σημαντικό όρισμα γιατί καθορίζουν τη διεύθυνση του αντικειμένου.

Για παράδειγμα

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

4. Ύψος και Πλάτος

Ύψος και Πλάτος - ορίστε το ύψος και το πλάτος του αντικειμένου, αντίστοιχα. Μπορεί να καθοριστεί τόσο σε pixel όσο και σε ποσοστά. Αν το θέσουμε ως ποσοστό, τότε οι τιμές υπολογίζονται με βάση την επιτρεπόμενη περιοχή.

Για παράδειγμα

5. Τύπος

Τύπος - ορίζει τον τύπο MIME των δεδομένων που καθορίζονται στο χαρακτηριστικό δεδομένων. Απαιτείται για το πρόγραμμα περιήγησης να προετοιμάσει τους απαραίτητους πόρους. Τις περισσότερες φορές η τιμή του είναι ακριβώς "application/x-shockwave-flash".

Εάν το πρόγραμμα περιήγησης δεν υποστηρίζει αντικείμενα (αυτό συμβαίνει συχνά εάν δεν είναι εγκατεστημένο το Adobe flash player), τότε μέσα στην ετικέτα μπορείτε να καθορίσετε κείμενο που θα ενημερώνει τον χρήστη ότι είναι αδύνατη η φόρτωση του αντικειμένου.

Για παράδειγμα

Λυπούμαστε, το αντικείμενο δεν μπορεί να εμφανιστεί Σημείωση 1

Το πρόγραμμα περιήγησης IE ενδέχεται να μην κατανοεί σωστά την τιμή των δεδομένων, επομένως θα πρέπει να καθορίσετε ξανά τη διεύθυνση αρχείου στις ετικέτες παραμέτρων:

Παράδειγμα: ρολόι που χρησιμοποιεί αντικείμενο

Χρησιμοποιώντας το αντικείμενο, μπορείτε εύκολα να εμφανίσετε αντικείμενα και στοιχεία πολυμέσων. Το πιο απλό και προφανές παράδειγμα είναι ένα ρολόι.

Η επίδειξη δείχνει τη γέφυρα μεταξύ των γραφικών 2D σε HTML5 και του αληθινού 3D (με χρήση WebGL). Ο σκοπός αυτού του άρθρου είναι να δείξει πώς να σχεδιάζετε τρισδιάστατα αντικείμενα χρησιμοποιώντας ένα πολυγωνικό πλέγμα. Ένα πολυγωνικό πλέγμα είναι μια συλλογή από κορυφές, άκρες και όψεις που καθορίζουν το σχήμα των πολυεδρικών αντικειμένων σε 3D γραφικά υπολογιστήκαι σταθερή μοντελοποίηση.

Απλά τρισδιάστατα αντικείμενα

Η πρόσοψη αποτελείται από τρίγωνα, τετράγωνα ή άλλα απλά πολύγωνα. Για να το δείξουμε αυτό, ετοιμάσαμε απλά τρισδιάστατα αντικείμενα - έναν κύβο και πολυεδρικές σφαίρες (με μεταβλητό αριθμό προσώπων).

Σχεδιάστε τρισδιάστατα αντικείμενα Βήμα 1: HTML

Ως συνήθως (για όλα τα demo που βασίζονται σε καμβά) έχουμε ένα πολύ απλό Σήμανση HTML(με ένα αντικείμενο μέσα, καμβάς):

Τρισδιάστατα αντικείμενα Wireframe σε HTML5 Χρησιμοποιήστε τα κουμπιά επάνω/κάτω για τον έλεγχο της διαφάνειας αντικειμένων

Ανάκτηση αρχικοποίησης αντικειμένου, βλ.

//var obj = νέος κύβος(); //var obj = νέα σφαίρα(6); var obj = νέα σφαίρα(16);

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

Βήμα 2. JS

Υπάρχουν τρία αρχεία JavaScript (main.js, meshes.js και transform.js), δημοσιεύουμε δύο από αυτά, το τρίτο (transform.js) περιέχει μόνο συναρτήσεις υπολογισμού που σχετίζονται με την περιστροφή, την κλίμακα και τα αντικείμενα έργου. Ας δούμε λοιπόν τον πρώτο κώδικα JavaScript:

js/meshes.js // Λάβετε μια συνάρτηση τυχαίου χρώματος getRandomColor() ( var letters = "0123456789ABCDEF".split(""); var color = "#"; for (var i = 0; i< 6; i++) { color += letters; } return color; } // Подготовка объекта function prepareObject(o) { o.colors = new Array(); // Составим норм o.normals = new Array(); for (var i = 0; i < o.faces.length; i++) { o.normals[i] = ; o.colors[i] = getRandomColor(); } // Составим центр: рассчитать максимальные позиции o.center = ; for (var i = 0; i < o.points.length; i++) { o.center += o.points[i]; o.center += o.points[i]; o.center += o.points[i]; } // Составим расстояния o.distances = new Array(); for (var i = 1; i < o.points.length; i++) { o.distances[i] = 0; } // Вычисляем среднее положение центра o.points_number = o.points.length; o.center = o.center / (o.points_number - 1); o.center = o.center / (o.points_number - 1); o.center = o.center / (o.points_number - 1); o.faces_number = o.faces.length; o.axis_x = ; o.axis_y = ; o.axis_z = ; } // Объект куб function cube() { // Подготовим точки и граней куба this.points=[ , , , , , , , , , , ]; this.faces=[ , , , , , , , , , , , , , , , , ]; prepareObject(this); } // Объект сфера function sphere(n) { var delta_angle = 2 * Math.PI / n; // Составим вершины (точек) сферы var vertices = ; for (var j = 0; j < n / 2 - 1; j++) { for (var i = 0; i < n; i++) { vertices = ; vertices = 100 * Math.sin((j + 1) * delta_angle) * Math.cos(i * delta_angle); vertices = 100 * Math.cos((j + 1) * delta_angle); vertices = 100 * Math.sin((j + 1) * delta_angle) * Math.sin(i * delta_angle); } } vertices[(n / 2 - 1) * n] = ; vertices[(n / 2 - 1) * n + 1] = ; vertices[(n / 2 - 1) * n] = 0; vertices[(n / 2 - 1) * n] = 100; vertices[(n / 2 - 1) * n] = 0; vertices[(n / 2 - 1) * n + 1] = 0; vertices[(n / 2 - 1) * n + 1] = -100; vertices[(n / 2 - 1) * n + 1] = 0; this.points = vertices; // Составим первый слой var faces = ; for (var j = 0; j < n / 2 - 2; j++) { for (var i = 0; i < n - 1; i++) { faces = ; faces = ; faces = j * n + i; faces = j * n + i + 1; faces = (j + 1) * n + i + 1; faces = j * n + i; faces = (j + 1) * n + i + 1; faces = (j + 1) * n + i; } faces = ; faces = ; faces = (j + 1) * n - 1; faces = (j + 1) * n; faces = j * n; faces = (j + 1) * n - 1; faces = j * n + n; faces = (j + 2) * n - 1; } for (var i = 0; i < n - 1; i++) { faces = ; faces = ; faces = (n / 2 - 1) * n; faces = i; faces = i + 1; faces = (n / 2 - 1) * n + 1; faces = (n / 2 - 2) * n + i + 1; faces = (n / 2 - 2) * n + i; } faces = ; faces = ; faces = (n / 2 - 1) * n; faces = n - 1; faces = 0; faces = (n / 2 - 1) * n + 1; faces = (n / 2 - 2) * n; faces = (n / 2 - 2) * n + n - 1; this.faces=faces; prepareObject(this); }

Στην αρχή πρέπει να προετοιμάσουμε όλα τα σημεία και την πρόσοψη των αντικειμένων μας. Υπάρχουν 2 συναρτήσεις: ο κύβος (που δημιουργεί αρχικούς πίνακες για ένα απλό αντικείμενο κύβου) και οι σφαίρες (για τη δημιουργία μιας σφαίρας). Είναι πολύ πιο δύσκολο να υπολογιστούν όλα τα σημεία και οι όψεις για μια πολυεδρική σφαίρα. Αφού έχουμε όλα αυτά τα σημεία και τις επιφάνειες, πρέπει να υπολογίσουμε άλλες παραμέτρους (όπως απόσταση, απόλυτο κέντρο και τρεις άξονες).

// Εσωτερικές μεταβλητές var canvas, ctx; var vAlpha = 0,5; var vShiftX = vShiftY = 0; var απόσταση = -700; var vMouseSens = 0,05; var iHalfX, iHalfY; // Συνάρτηση αρχικοποίησης sceneInit() ( // Προετοιμασία του καμβά και του καμβά περιβάλλοντος αντικειμένου = document.getElementById("scene"); ctx = canvas.getContext("2d"); iHalfX = canvas.width / 2; iHalfY = καμβάς. ύψος / 2; // Αρχική κλίμακα και κλίμακα μετάφρασηςObj(, obj); translateObj([-obj.center, -obj.center, -obj.center],obj); translateObj(, obj); // Σύνδεση στο συμβάν έγγραφο χειριστή. onkeydown = handleKeydown; canvas.onmousemove = handleMousemove; // Κύριος βρόχος setInterval(drawScene, 25); ) // Χειριστής συμβάντων OnKeyDown συνάρτηση handleKeydown(e) ( kCode = ((e.which) || (e.Co )); διακόπτης (kCode) (περίπτωση 38: vAlpha = (vAlpha = 0,2) ? (vAlpha - 0,1) : vAlpha; break; // Down key ) ) // OnMouseMove χειριστής συνάρτησης χειρισμού συμβάντωνMousemove(e) ( var x = e .pageX - canvas.offsetLeft; var y = e.pageY - canvas.offsetTop; εάν ((x > 0) && (x< canvas.width) && (y >0) && (y< canvas.height)) { vShiftY = vMouseSens * (x - iHalfX) / iHalfX; vShiftX = vMouseSens * (y - iHalfY) / iHalfY; } } // Рисуем основную функцию function drawScene() { // Очистить холст ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // Установить цвет заливки, цвет обводки, толщину линии и глобальной альфа- ctx.strokeStyle = "rgb(0,0,0)"; ctx.lineWidth = 0.5; ctx.globalAlpha= vAlpha; // Вертикальный и горизонтальный поворот var vP1x = getRotationPar(, , vShiftX); var vP2x = getRotationPar(, , vShiftX); var vP1y = getRotationPar(, , vShiftY); var vP2y = getRotationPar(, , vShiftY); rotateObj(vP1x, vP2x, obj); rotateObj(vP1y, vP2y, obj); // Пересчитываем расстояния for (var i = 0; i < obj.points_number; i++) { obj.distances[i] = Math.pow(obj.points[i],2) + Math.pow(obj.points[i],2) + Math.pow(obj.points[i], 2); } // Подготовить массив с фасадом треугольников (с расчетом максимальное расстояние для каждой грани) var iCnt = 0; var aFaceTriangles = new Array(); for (var i = 0; i < obj.faces_number; i++) { var max = obj.distances]; for (var f = 1; f < obj.faces[i].length; f++) { if (obj.distances[f]] >max) max = obj.distance[f]]; ) aFaceTriangles = (faceVertex:obj.faces[i], faceColor:obj.colors[i], απόσταση:max); ) aFaceTriangles.sort(sortByDistance); // Προετοιμάστε έναν πίνακα με προβλεπόμενα σημεία var aPrjPoints = new Array(); για (var i = 0; i< obj.points.length; i++) { aPrjPoints[i] = project(distance, obj.points[i], iHalfX, iHalfY); } // Нарисовать объект (поверхность) for (var i = 0; i < iCnt; i++) { ctx.fillStyle = aFaceTriangles[i].faceColor; // Начало пути ctx.beginPath(); // Фасад индекс вершины var iFaceVertex = aFaceTriangles[i].faceVertex; // Переместить в исходное положение ctx.moveTo(aPrjPoints, aPrjPoints); // И нарисовать три линии (построить треугольник) for (var z = 1; z < aFaceTriangles[i].faceVertex.length; z++) { ctx.lineTo(aPrjPoints], aPrjPoints]); } // Закрыть путь, и заполнить треугольник ctx.closePath(); ctx.stroke(); ctx.fill(); } } // Функция сортировки function sortByDistance(x, y) { return (y.distance - x.distance); } // Инициализация if (window.attachEvent) { window.attachEvent("onload", sceneInit); } else { if (window.onload) { var curronload = window.onload; var newonload = function() { curronload(); sceneInit(); }; window.onload = newonload; } else { window.onload = sceneInit; } }

Μόλις φορτωθεί η σελίδα, κάνουμε την κύρια προετοιμασία (συνάρτηση sceneInit). Δημιουργούμε ένα πλαίσιο καμβά και αντικειμένου, που σημαίνει ότι εκτελούμε την αρχική κλίμακα και μεταφράζουμε τα αντικείμενά μας που δημιουργήσαμε στην αρχή (κύβο ή μπάλα). Στη συνέχεια, επισυνάπτουμε χειριστές συμβάντων στο OnKeyDown και στο OnMouseMove και ορίζουμε ένα χρονόμετρο για την απόδοση της κύριας σκηνής μας (τη συνάρτηση DrawScene). Μην ξεχνάτε ότι μπορούμε να αλλάξουμε τις παραμέτρους globalAlpha πατώντας τα πλήκτρα Πάνω/Κάτω.