Κάνοντας τον κώδικα βροχής - Matrix Style

Εισαγωγή στις κινούμενες εικόνες καμβά HTML 5

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

Τι είναι ο καμβάς;

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

Η δύναμη του καμβά περιορίζεται μόνο από τη φαντασία σας. Έχω χρησιμοποιήσει το στοιχείο καμβά για να δημιουργήσω τα πάντα, από στατικές εικόνες εν κινήσει έως παιχνίδια, γραφικές διεπαφές χρήστη. και ακόμη και ένα πρόγραμμα δημιουργίας email τύπου MailChimp. Μπορείτε ακόμη και να κάνετε τον καμβά σε 3D!

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

Ξεκινώντας

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

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

Το HTML:

Το CSS:

body{ background-color:#d2d2d2;}#canvas{ background-color:#000; display:block; margin:auto;}#logo{ display:none;}

Η JavaScript:

var canvas = document.getElementById(‘canvas’);var ctx = canvas.getContext(‘2d’);var t = text();var logo = document.getElementById(‘logo’);var lines = [];window.setInterval(draw, 100);
function draw() { if (Math.floor(Math.random() * 2) === 0 && lines.length < 100) { lines.push(new textLine()); } ctx.clearRect(0, 0, canvas.width, canvas.height); lines.forEach(function(tl) {
 ctx.drawImage(tl.text, tl.posX, tl.animate(), 20, 1000); }); ctx.drawImage(logo, 100, 155, 400, 70);
}
function textLine() { this.text = t; this.posX = (function() { return Math.floor(Math.random() * canvas.width); })(); this.offsetY = -1000; this.animate = function() { if (this.offsetY >= 0) { this.offsetY = -1000; } this.offsetY += 10; return this.offsetY; };}
function text() { var offscreenCanvas = document.createElement(‘canvas’); offscreenCanvas.width = “30”; offscreenCanvas.height = “1000”; offscreenCanvas.style.display = “none”; document.body.appendChild(offscreenCanvas); var octx = offscreenCanvas.getContext(‘2d’); octx.textAlign = “center”; octx.shadowColor = “lightgreen”; octx.shadowOffsetX = 2; octx.shadowOffsetY = -5; octx.shadowBlur = 1; octx.fillStyle = ‘darkgreen’; octx.textAlign = “left”; var step = 10; for (i = 0; i < 100; i++) { var charCode = 0; while (charCode < 60) { charCode = Math.floor(Math.random() * 100); } octx.fillText(String.fromCharCode(charCode), 0, step); step += 10; } return offscreenCanvas;}

Πώς λειτουργεί;

Στη γραμμή # 1 παίρνουμε το στοιχείο καμβά από το αναγνωριστικό του. Κάθε στοιχείο καμβά έχει το δικό του περιβάλλον - μια διεπαφή για τον χειρισμό των περιεχομένων του. Σε αυτό αναφέρεται η μεταβλητή ctx στη γραμμή 2.

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

Δεδομένου ότι το κείμενο αποδίδεται πάντα οριζόντια, θα αποδώσουμε το κείμενο σε έναν άλλο αόρατο καμβά και θα το σχεδιάσουμε ως εικόνα στον αρχικό μας καμβά.

Στη γραμμή # 3 ορίζουμε τη μεταβλητή t στο αποτέλεσμα της συνάρτησης text () που δημιουργεί και επιστρέφει το αόρατο στοιχείο καμβά.

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

Για τη δημιουργία κάθετων τυχαίων χαρακτήρων βάζουμε βρόχο και σχεδιάζουμε έναν νέο τυχαίο χαρακτήρα 100 φορές και τον αυξάνουμε κατά 10px στον άξονα Υ σε κάθε διάστημα. Για να δημιουργήσω έναν τυχαίο χαρακτήρα, χρησιμοποιώ το Math.random () για να λάβω έναν αριθμό μεταξύ 60 και 100 και μετά να τον μετατρέψω σε χαρακτήρα χρησιμοποιώντας το String.fromCharCode ().

Αυτό σχεδιάζει το κάθετο κείμενο με μια σκιά και επιστρέφει τον καμβά στη μεταβλητή t.

Ο βρόχος κινουμένων σχεδίων

Κατά την επόμενη 3 γραμμή κώδικα, ανακτώ το λογότυπο FreeCodeCamp, δηλώνω μια συστοιχία που θα κρατά τις ξεχωριστές γραμμές που αποτελούν το φόντο και χρησιμοποιεί το window.setInterval για την εκτέλεση της συνάρτησης draw () κάθε 100 χιλιοστά του δευτερολέπτου.

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

Το πρώτο πράγμα που κάνει η συνάρτηση draw () είναι να δημιουργήσει έναν τυχαίο αριθμό μεταξύ 1 και 0. Εάν ο αριθμός είναι 0 και υπάρχουν λιγότερες από 100 μεμονωμένες γραμμές κειμένου που κινούνται στο παρασκήνιο, ωθεί μια νέα γραμμή κειμένου () στον πίνακα γραμμών .

Η συνάρτηση textLine () επιστρέφει ένα αντικείμενο που περιέχει

  1. Το προκύπτον κατακόρυφο κείμενο διατηρείται στη μεταβλητή t .
  2. Το ποσό αντιστάθμισης που θα αποδίδεται στον άξονα Χ (δημιουργείται τυχαία σε κάθε παρουσία του αντικειμένου).
  3. Μια αρχική μετατόπιση -1000 εικονοστοιχείων στον άξονα Υ που την τοποθετεί ακριβώς πάνω από τον καμβά.
  4. Μια μέθοδος animate που προσθέτει 10px στον άξονα Y κάθε φορά που καλείται και επιστρέφει το αποτέλεσμα κάνοντας το κείμενο να κινείται προς τα κάτω. Εάν η μετατόπιση του άξονα Υ φτάσει στο 0, επαναφέρεται σε -1000 εικονοστοιχεία παρέχοντας συνεχή κίνηση.

Ο καμβάς διαγράφεται και, στη συνέχεια, η συνάρτηση draw () περνάει από κάθε γραμμή κειμένου στη σειρά γραμμών και τον τραβάει στον καμβά, καλώντας τη μέθοδο animate του κάθε φορά που σχεδιάζεται μια γραμμή για να τον μετακινήσετε προς τα κάτω.

Δεδομένου ότι κάθε γραμμή έχει μια τυχαία μετατόπιση στον άξονα X και μια νέα γραμμή προστίθεται σε τυχαία διαστήματα, οι γραμμές του κειμένου πέφτουν με διαφορετικούς ρυθμούς στον καμβά δημιουργώντας το εφέ βροχής κώδικα!

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

Πού να τώρα;

Εάν ο καμβάς είναι κάτι που σας ενδιαφέρει, μπορείτε να μάθετε περισσότερα σχετικά με αυτό στα Έγγραφα Mozilla.

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

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

  1. Κάντε τις διαστάσεις δυναμικές έτσι ώστε ο καμβάς να κλιμακωθεί και να συνεχίσει να κινείται καθώς αλλάζετε το μέγεθος του προγράμματος περιήγησής σας.
  2. Αντί να δημιουργείτε τυχαία χαρακτήρες, αρπάξτε ένα αρχείο του δικού σας κώδικα από το GitHub και δημιουργήστε το αντί αυτού.
  3. Render your name in place of the FreeCodeCamp logo, and make it look like the Matrix poster.
  4. Instead of generating each line at random, bind a click event to the canvas and render a new line at the X coordinates of your mouse click.

I hope you enjoyed this intro, if you did feel free to check out some of the other articles that I’ve written.

Turning code to cash — How to make money as a Web Developer and live to tell the tale.

So you just learnt to code. You’re eager and anyone who can’t code thinks you’re a genius, word gets out and all of a…medium.comHow to write a jQuery like library in 71 lines of code — Learn about the DOM

Τα πλαίσια JavaScript είναι όλα οργισμένα. Οι πιθανότητες είναι ότι οποιαδήποτε τροφοδοσία ειδήσεων σχετικά με τη JavaScript που ανοίγετε θα είναι απορριμμένη medium.com 5 Πράγματα που πρέπει να θυμάστε όταν μαθαίνετε να προγραμματίζετε

Η εκμάθηση του προγράμματος είναι πρόκληση. Εκτός από την επιλογή μιας γλώσσας ή τη δημιουργία ενός περιβάλλοντος ανάπτυξης που… medium.com Πώς έγινα προγραμματιστής. Και όταν άρχισα να φωνάζω τον εαυτό μου

Ήθελα να ξεκινήσω να γράφω blog για προγραμματισμό για μήνες τώρα και όπως και πολλοί άλλοι πριν από εμένα ξεκίνησα γεμάτος… medium.com Προληπτικός προγραμματισμός - πώς να διορθώσετε σφάλματα πριν συμβούν

… Και γιατί ο Σέρλοκ Χολμς θα ήταν ένας λαμπρός προγραμματιστής medium.com