JavaScript είναι μια δημοφιλής γλώσσα προγραμματισμού που χρησιμοποιείται για τη δημιουργία client-side scripts που πρέπει να εφαρμοστούν σε μια ιστοσελίδα . Πρόκειται για μια ευέλικτη γλώσσα που μπορεί να χρησιμοποιηθεί για την ανάπτυξη δυναμικών ιστοσελίδων με ενισχυμένη και διαδραστικά interfaces . Η πρόσφατα κυκλοφόρησε HTML 5 παρουσιάζει το στοιχείο καμβά, ένα συστατικό που μπορεί να χρησιμοποιηθεί για να καταστήσει 2D σχήματα και εικόνες bitmap. JavaScript μπορεί να χρησιμοποιηθεί για να σχεδιάσετε ένα αντικείμενο , όπως ένα δέντρο , χρησιμοποιώντας το στοιχείο καμβά . Οδηγίες
Η
1 Ανοίξτε τον αγαπημένο σας πρόγραμμα περιήγησης στο Web σας και πλοηγηθείτε στο " codediesel.com /javascript /σχέδιο - δέντρα - σε καμβά . " Κάντε κλικ στο σύνδεσμο " Download Source " και αποθηκεύστε το αρχείο στο σκληρό δίσκο σας . Κάντε δεξί κλικ στο αρχείο , επιλέξτε " Εξαγωγή όλων" από το μενού που εμφανίζεται και επιλέξτε ένα φάκελο στον οποίο θα εξαγάγετε τα περιεχόμενα του αρχείου . 2
Ανοίξτε ένα πρόγραμμα επεξεργασίας κειμένου , όπως Notepad ή το WordPad , για να αρχίσετε να δημιουργείτε μια νέα σελίδα HTML
εικόνων 3
Ξεκινήστε τη σελίδα με τον συνήθη τρόπο , εισάγοντας αυτές τις γραμμές : .
< head>
Η 4
Δώστε τη σελίδα σας έναν τίτλο με τη χρήση του τίτλου tag , όπως αυτό : .
JavaScript δέντρο καμβά < /title> <br> <p> Μπορείτε να αντικαταστήσετε " JavaScript δέντρο καμβά " με οποιοδήποτε άλλο τίτλο <br> 5 < p> Καθορισμός και να φορτώσει το σενάριο εισάγοντας αυτή τη γραμμή : <br> <p> <script type='text/javascript' src='algoTree.js'> < /script > <br> <p> Η " ? algoTree.js " είναι ένα σενάριο που αναπτύχθηκε για να σας βοηθήσει να σχεδιάσετε τα δέντρα με τη χρήση της HTML 5 καμβά <br> Η 6 <p> Τερματισμός της . " " ενότητα και να αρχίσει το« κεφάλι τμήμα του σώματος " της σελίδας HTML με εισαγωγή αυτών των δύο γραμμές : <br> <p> < /head> <body> <br> Η 7 <p> Ορίστε το στοιχείο καμβά και τον τύπο του σεναρίου , χρησιμοποιώντας αυτές τις δύο γραμμές : <br> <p> <canvas id="canvas"> < /καμβά > <script type="application/javascript"> <br> 8 <p> Ορίστε το πλάτος και το ύψος των νέων δέντρο σας και να ορίσετε να καμβά με την εισαγωγή αυτών των δύο γραμμές : <br> ύψος <p> var = 300 , width = 300 ? var καμβά = document.getElementById ( « καμβά ») ? canvas.height = ύψος? canvas.width = πλάτος? < br > <p> Αντικαταστήστε τις δύο " 300 " αξίες με τις διαστάσεις που θέλετε το δέντρο σας να έχουν <br> Η 9 <p> Ορίστε το δέντρο ως ένα αντικείμενο 3D με την προσθήκη αυτή τη γραμμή : . <br> < p > ctx = canvas.getContext ( " 2d ")? <br> <br> 10 <p> Σχεδιάστε το δέντρο με τη μέθοδο της " tree.draw " , όπως αυτό : <br> <p> tree.draw ( ctx , πλάτος, ύψος) ? <br> <p> Μπορείτε να κάνετε το δέντρο πιο σύνθετη με τη χρήση του " " spread " παράμετρος ( με τιμές μεταξύ 0,3 και 0,9 ) . Μπορείτε επίσης να χρησιμοποιήσετε το " φύλλα show = false " παράμετρο για να σχεδιάσετε το δέντρο χωρίς φύλλα . Για να αλλάξετε τον τύπο των φύλλων , χρησιμοποιήστε την παράμετρο " αφήνει Τύπος " ( μπορεί να ρυθμιστεί σε tree.SMALL_LEAVES , tree.MEDIUM_LEAVES , tree.BIG_LEAVES και tree.THIN_LEAVES ) . Εδώ είναι το πώς η πλήρης εντολή μοιάζει με : <br> <p> tree.draw ( ctx , ύψος, πλάτος , εξάπλωση φύλλα = 0.5 , δείχνουν = true , αφήνει type = tree.BIG_LEAVES ) ? <br> <br> 11 < p> Τέλος το " σενάριο ", " σώμα " και " html " τμήματα εισάγοντας αυτές τις γραμμές : <br> <p> < /script > < /body> < /html > <br> < br > 12 <p> Επιβεβαιώστε τον κωδικό για τυχόν λάθη . Σε αυτό το σημείο , το έγγραφό σας μοιάζει με αυτό : <br> <p> <html> <head> < meta http -equiv = " Content-Type " content = " text /html ? Charset = utf - 8 " ? > <title> JavaScript δέντρο καμβά < /title> <script type='text/javascript' src='algoTree.js'> < /script > < /head> <body> < καμβά id = " καμβά " > < /καμβά > <script type="application/javascript"> ύψος var = 300 , width = 300 ? var καμβά = document.getElementById ( « καμβά » ) ? canvas.height = ύψος? canvas.width = πλάτος? ctx = canvas.getContext ( " 2d ")? tree.draw ( ctx , ύψος, πλάτος , εξάπλωση = 0,5 , τα φύλλα δείχνουν = true , αφήνει type = tree.BIG_LEAVES ) ? < /script > < /body> < /html > <br> Η 13 <p> Επιλέξτε να αποθηκεύσετε το αρχείο κειμένου και πληκτρολογήστε " . html " στο πλαίσιο " όνομα αρχείου " , μετά το όνομα της ιστοσελίδας σας ιστοσελίδα , για να αποθηκεύσετε το έγγραφο ως αρχείο HTML . Αποθηκεύστε το στο φάκελο όπου προέρχονται τα περιεχόμενα του αρχείου . Η " algoTree.js " βρίσκεται σε αυτόν το φάκελο . <br> Η 14 <p> Ανεβάστε το αρχείο HTML και το " algoTree.js " script σε ένα Web υποδοχής και ελέγξτε την ιστοσελίδα . <br> < Br > <br> εικόνων
<div class="grad2"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3314932315682382" crossorigin="anonymous"></script> <!-- 221021-2 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3314932315682382" data-ad-slot="8094203668" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div>
<div class="grad3"></div>
</div>
<div class="fanyedads">
<ul>
<li>Τελευταίο άρθρο: <a class='LinkPrevArticle' href='http://www.221021.com/Programming/javascript-programming/90754.html' >Πώς να μετατρέψετε μια κανονική κόμβου σε jQuery κόμβου </a>
<li>Επόμενο άρθρο: <a class='LinkNextArticle' href='http://www.221021.com/Programming/javascript-programming/90756.html' >Πώς να Επισημάνετε μια ετικέτα σε iFrame Περιεχόμενο </a>
</ul>
</div>
</div>
<div class="woqinimaderwr24">
<div class="dibud23">
<div class="biaotidas51">
<div class="biaotidas511"><h3>Συναφής σύστασή</h3></div>
<div class="butudasda"></div>
</div>
</div>
<div class="dibud24">
<div class="dibud241">
<ul class="dsa31das">
<li><a href="http://www.221021.com/Programming/javascript-programming/91078.html" target="_blank">Πώς να πάρει την πηγή ενός στοιχείου εικόνας χρησιμοποιώντας JavaScript </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91241.html" target="_blank">Πώς να σταματήσει τα μηνύματα λάθους είναι Null Null ή μη αντικειμένου </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/90949.html" target="_blank">Πώς να ενημερώσετε DIV </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91220.html" target="_blank">Πώς να ενσωματώσει το Windows Media Player σε Javascript </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91100.html" target="_blank">Πώς να αλλάξετε το μέγεθος και Τύπος του πινέζα σε ένα Virtual Earth Map </a></li>
</ul>
</div>
<div class="dibud242">
<div class="biaotidasoidasf3h4">
<h4>Τελευταία άρθρα</h4>
<div class="nibushihenzaiyi"></div>
</div>
<ul class="thydghaodennrend">
<li><a href="http://www.221021.com/Programming/javascript-programming/91235.html" target="_blank">Τρόπος εμφάνισης XML με JavaScript </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/90758.html" target="_blank">Πώς να κάνει ένα γράφημα με Jquery </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91200.html" target="_blank">Πώς να ανακατεύθυνσης μιας ιστοσελίδας Χρησιμοποιώντας Javascript </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/90776.html" target="_blank">Γιατί άραγε μου Javascript Εμφάνιση Void </a></li>
</ul>
</div>
</div>
</div>
<div class="dibudaohnagdsaw">
<div class="das342sd"><p>Πνευματικά δικαιώματα © <a href="http://www.221021.com/" target="_blank" >Γνώση Υπολογιστών</a> Όλα τα δικαιώματα κατοχυρωμένα </p></div>
</div>
</div>
</body>
</html>