Ξεκινήστε με το HTML Canvas

Feb 9, 2026
πως να

Το HTML & LT; Canvas & GT; Το στοιχείο είναι μια ισχυρή λύση για τη δημιουργία γραφικών που βασίζονται σε εικονοστοιχεία στο διαδίκτυο χρησιμοποιώντας Javascript και θα σας επιτρέψει να δημιουργήσετε κάποια αξιοσημείωτα αποτελέσματα με μια μικρή πρακτική.

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

01. Δημιουργία σελίδας

Ο καμβάς είναι θεμελιωδώς ένα στοιχείο HTML που τοποθετείτε στη σελίδα, κλίμακα για να καλύψετε την περιοχή που θέλετε και στη συνέχεια να σχεδιάσετε. Για να ξεκινήσετε, πρέπει να δημιουργήσουμε μια απλή σελίδα με ένα αντικείμενο καμβά. 

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
  & lt; κεφάλι & gt;
  & lt; meta charset = 'utf-8' / & gt;
  & lt; τίτλος & gt; html canvas demo & lt; / τίτλος & gt;
  & lt; link rel = 'stylesheet' href = 'custom.css' / & gt;
  & lt; script src = "canvas.js" & gt; / script & gt;
  & lt; / head & gt;
  & lt; body & gt;
  & lt; canvas id = "html-καμβά" & gt;
  & lt; / Body & GT;
& lt; / html & gt;

02. Κλίμακα καμβά

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

 καμβά {
  Ύψος: 100VH;
  Πλάτος: 100VW;
  Θέση: Απόλυτη.
  Ιστορικό-Χρώμα: # 000000;
}
  Περιθώριο: 0;
  Padding: 0;
}

03. Αρχικοποιήστε τον καμβά για χρήση

Στη συνέχεια πρέπει να προσθέσουμε κάποιο javascript για να ρυθμίσετε τον καμβά έτοιμο για χρήση. Θα το συνδέσουμε ένα domcontent φορτωμένο συμβάν για να διασφαλίσουμε ότι το σενάριο δεν προσπαθεί να τρέξει πριν το στοιχείο του καμβά είναι έτοιμη. Θα έχουμε επίσης να ορίσει την ανάλυση καμβά για να ταιριάζει με την περιοχή που καλύπτει - διαφορετικά ο καμβάς θα κλιμακωθεί χωρίς να αυξάνεται ανάλυση, οδηγώντας σε θολή ή pixellated γραφικά. 

 ​​Document.addeventListener ("Domcontent φορτωμένο", λειτουργία () {
  var canvas = document.getelementidyid ("html-καμβά");
  var κύκλους = [];
  VAR RADIUS = 50;
  canvas.width = canvas.Clientwidth.
  canvas.height = canvas.ClientHeight.
  var πλαίσιο = canvas.getcontext ("2d");
}, FALSE).

04. Σχεδιάστε ένα σχήμα

Θα παρατηρήσετε ότι στο τελευταίο βήμα, κόμισε κάτι που ονομάζεται «πλαίσιο». Αυτό συμβαίνει το σχέδιο σε καμβά. Είναι πιο εύκολο να σκεφτείτε το πλαίσιο ως ένα πινέλο που μπορούμε να χρησιμοποιήσουμε για να σχεδιάσουμε διαφορετικές γραμμές, τόξα και βασικά σχήματα.

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

 ​​Λειτουργία Drawcircle (x, y, ακτίνα, σύνορα, border_colour, fill_colour)
  {
  control.Beginpath ();
  Control.ARC (x, y, ακτίνα, 0,2 * math.pi);
  control.strokestyle = border_colour;
  Control.Fillstyle = fill_colour;
  Control.Linewidth = σύνορα;
  πλαίσιο .Cloosepath ();
  conender.fill ();
  πλαίσιο.
  }

05. Δημιουργήστε πολλούς κύκλους

Μεγάλος. Έχουμε μια λειτουργία που μπορεί να αντλήσει κύκλους. Τώρα χρειαζόμαστε κάτι να σχεδιάσουμε. Ας επεκτείνουμε τον κώδικα από το Βήμα 3 για να δημιουργήσετε ένα πίνακα που περιγράφει αντικείμενα κύκλου. Θα αποθηκεύσει το X και το Y COCKED, το χρώμα και μια τιμή κατεύθυνσης.

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

 ​​για (var i = 0, i & lt; 20; i ++) {
  var x = ακτίνα + (math.random () * (καμβά. (Canvas.width - (2 * ακτίνα)));
  var y = ακτίνα + (math.random () * (canvas.height - (2 * ακτίνα)));
  var χρώμα = randomcolour ();
  var διεύθυνση = math.random () * 2.0 * math.pi;
  Circles.push ({x: x, y: y, χρώμα: χρώμα, κατεύθυνση: κατεύθυνση});
  σχεδιάζω(); }

06. Τυχαία το χρώμα

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

 ​​Λειτουργία Randomour () {
  var chars = '0123456789Abcdef';
  var color = '#';
  για (var i = 0, i & lt; 6; i ++) {
  Χρώμα + = chars [math.floor (math.random () * 16)];
  }
  επιστροφή χρώματος; }

07. Σχεδιάστε τα γραφικά στη σελίδα

Τώρα είμαστε έτοιμοι να φέρουμε τα πράγματα μαζί, εφαρμόζοντας τη λειτουργία κλήρωσης (). Αυτό θα κάνει δύο βασικά πράγματα. Πρώτον, θα καθαρίσει τον καμβά χρησιμοποιώντας τη λειτουργία Clearrect (). Αυτό θα είναι σημαντικό όταν έρχονται να ζωντανόμαστε τους κύκλους μας, για να αποφύγουμε το νέο πλαίσιο πάνω από την κορυφή του παλιού. Στη συνέχεια, θα αναπροσαρμόσει τον πίνακα που κατασκευάστηκαν και σχεδιάζουμε κάθε κύκλο στον καμβά σε διαδοχή χρησιμοποιώντας τη λειτουργία του Drawcircle. 

 ​​Λειτουργία κλήρωσης () {
  Context.Clearrect (0, 0, καμβά. Λήψη, καμβά.Hheight).
  Circles.Fooeach (λειτουργία (κύκλος) {
  Rurcircle (Circle.x, Circle.y, ακτίνα, 5, circle.colour, circle.colour);
    }); }

08. Ζωντανή τα σχήματα

Εάν το δοκιμάσετε τώρα, θα δείτε μερικούς στατικούς κύκλους ζωγραφισμένους στη σελίδα. Αλλά θέλουμε να τους ζωντανήσουμε. Για να το κάνετε αυτό, πρέπει να επεκτείνουμε τη λειτουργία της κλήρωσης () με μερικούς τρόπους. Πρώτον, θα χρησιμοποιήσουμε την τιμή Circle.Direction που πιέσαμε στη διάταξη για να υπολογίσετε τις αλλαγές στη θέση x και y για τον κύκλο.

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

 ​​Λειτουργία κλήρωσης () {
  Context.Clearrect (0, 0, καμβά. Λήψη, καμβά.Hheight).
  Circles.Fooeach (λειτουργία (κύκλος) {
  circle.x = circle.x + math.cos (circle.direction);
  circle.y = circle.y + math.sin (circle.diection);
  Rurcircle (Circle.x, Circle.y, ακτίνα, 5, circle.colour, circle.colour);
  });
  Αιθέσιον αιπτικό δυναμικό (ισοπαλία);
  }

09. Αναπήδηση στην άκρη της σελίδας

Υπάρχει ένα πράγμα που λείπει ακόμα. Οι κύκλοι τώρα απλά εξαφανίζονται από την άκρη της οθόνης. Ας τους κάνουμε να αναπηδήσουν πίσω. Για να το κάνετε αυτό, θα προσθέσουμε μια κλήση σε μια νέα λειτουργία, αναπήδηση (κύκλο), μέσα στο βρόχο foreach της λειτουργίας της κλήρωσης ().

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

 ​​Λειτουργία αναπήδησης (κύκλος) {
  Εάν (((Circle.x - Radius) & LT, 0) || ((Circle.y - Radius) & Lt; 0) || ((Circle.x + Radius) & GT; Canvas.width) || ((κύκλος. y + ακτίνα) & gt; canvas.height)) {
  circle.diection + = (math.pi / 2);
  }
  Εάν (Circle.Direction & GT; (2 * math.pi)) {
  circle.direction - = (2 * math.pi);
  }
}

Αυτό το άρθρο εμφανίστηκε αρχικά στο Σχεδιαστής ιστοσελίδων Τεύχος 266. Αγοράστε το εδώ.

Σχετικά Άρθρα:

  • Δημιουργήστε μια ψηφιακή χαρά ένα σκίτσο χρησιμοποιώντας καμβά
  • Όλα όσα πρέπει να γνωρίζετε για το νέο node.js 8
  • Πώς να εξάγετε μετά από τα εφέ κινούμενα σχέδια σε HTML5

πως να - Τα πιο δημοφιλή άρθρα

Tutorial Adobe Fresco: Δημιουργήστε ένα πορτρέτο στην εφαρμογή Ζωγραφικής

πως να Feb 9, 2026

(Πίστωση εικόνας: Phil Galloway) Για αυτό το εκπαιδευτικό πρόγραμμα Adobe..

Χρησιμοποιήστε το εργαλείο Pen και τις υφές για να προσθέσετε το βάθος στο Photoshop

πως να Feb 9, 2026

Πάνω από τα παρακάτω βίντεο σύντομης οθόνης, Τσάρλι Ντάβης , έν..

Σχεδιαστής συγγένειας: Πώς να χρησιμοποιήσετε το εργαλείο Pen

πως να Feb 9, 2026

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

Πώς να δημιουργήσετε glazes με ακουαρέλα

πως να Feb 9, 2026

Για αυτό το εργαστήριο, θα σας πάρω βήμα προς βήμα μέσα από ένα από τα έ�..

4 Συμβουλές για τη βελτίωση της απόδοσης της σελίδας σας

πως να Feb 9, 2026

Αναλυτής απόδοσης ιστού Henri Helvetica θα μοιράζονται ..

6 τρόποι να επιταχύνετε τη μοντελοποίηση

πως να Feb 9, 2026

Μια πιο αποτελεσματική ροή εργασίας είναι το προφανές όφελος της βελτ�..

Πώς να σχεδιάσετε ανταποκρινόμενες και συσκευές-αγνωστικές μορφές

πως να Feb 9, 2026

Είτε πρόκειται για μια ροή εγγραφής είτε ένα βήμα πολλαπλών προβολών, �..

Πώς να δημιουργήσετε μαλλιά στυλ Manga σε κίνηση

πως να Feb 9, 2026

Μάθηση Πώς να σχεδιάσετε manga δεν είναι εύκολο κατόρθωμα. Έτσι, για να το κάνετε εύκολο εύκολο, ακο..

Κατηγορίες