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

Sep 15, 2025

πως να

Το 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

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

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

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

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

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

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

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

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

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

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

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

Πώς να κάνετε ένα meme στο Photoshop

Ένας οδηγός για το όραμα σύννεφο της Google

3 Συμβουλές για τη χειροτεχνία εκπληκτικό διαφημιστικό υλικό εκτύπωσης

Ενεργοποιήστε τα μενού σας χρησιμοποιώντας κινούμενα σχέδια με CSS

Σχεδιάστε ένα μολύβι πορτρέτο ενός σκύλου

Το μυστικό της ζωγραφικής όπως το Monet

Δημιουργία ποιοτικών ψηφιακών αντιγράφων της τέχνης σας

Πώς να κυριαρχήσει 3D Fan Art

Κατηγορίες