Επεξήγηση καμβά HTML: Εισαγωγή σε λειτουργίες καμβά HTML5 και JavaScript

Πριν από το Emoji, κάποιο φόντο…

Άρχισα να εργάζομαι στον τομέα ανάπτυξης διαδικτύου πριν από περίπου 6 μήνες αφού πέρασα το μεγαλύτερο μέρος της καριέρας μου στην εκπαίδευση. Η μετάβαση ήταν μεγάλη και είμαι πολύ ευγνώμων για την ευκαιρία να εργαστώ σε πραγματικές εφαρμογές διαδικτύου.

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

Μαζί με τις σπουδές μου, άρχισα πρόσφατα να διδάσκω ένα «Intro to JavaScript Course» σε εφήβους του Tampa Bay (στο The Iron Yard στο St.Pete της Φλόριντα). Αυτή ήταν μια εξαιρετική εμπειρία για πολλούς λόγους. Πρώτον, με έχει προκαλέσει να μάθω περισσότερα για τις περιπλοκές και τις αποχρώσεις της γλώσσας JavaScript.

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

Βλέπετε, το πρόγραμμα σπουδών που αρχικά πίστευα ότι θα ήταν υπέροχο για αυτή την τάξη ήταν το JavaScript με τρεις τρόπους: JS στο DOM, JS στον διακομιστή και λειτουργικό προγραμματισμό JS.

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

Παρακάτω είναι το πρώτο μάθημα που έδωσα στους μαθητές όπου ξεκίνησα να συζητώ τις λειτουργίες και καταλήγω να δημιουργώ ένα χαμογελαστό πρόσωπο emoji. Απολαμβάνω!

Αν θέλετε να ακολουθήσετε καθώς μιλάμε για λειτουργίες, ανοίξτε ένα πρόγραμμα περιήγησης και μεταβείτε στο repl.it και κάτω από δημοφιλείς γλώσσες επιλέξτε NodeJS. Ένα REPL (Read Evaluate Print Loop) θα ανοίξει για εσάς και μπορείτε να ακολουθήσετε μαζί με τον κωδικό.

Τι είναι οι λειτουργίες;

Για να καταλάβουμε πώς θα χρησιμοποιήσουμε τον καμβά HTML5 πρέπει να καταλάβουμε λίγο για τις λειτουργίες.

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

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

Τύποι λειτουργιών

Κανονική συνάρτηση Ole

Δηλώνουμε μια βασική συνάρτηση χρησιμοποιώντας τη συνάρτηση λέξεων-κλειδιών JavaScript .

function sayHelloTo(name) { return ‘Hello ‘ + name;}sayHelloTo(‘Adam’);

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

Σχέδιο κατασκευαστή

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

function Person(name) { this.name = name; this.sayHello = function() { return “Hello, my name is “ + this.name; }}var me = new Person(“Adam”);me.sayHello();

Η Javascript λέξη-κλειδί αυτό αναφέρεται στη λειτουργία. Αυτό σημαίνει ότι όταν περνάμε σε μια μεταβλητή όπως το όνομα , όπως κάναμε πριν, μπορούμε να την αντιστοιχίσουμε στη συνάρτηση και σε κάθε περίπτωση αυτής της συνάρτησης. Για να δημιουργήσουμε μια παρουσία χρησιμοποιούμε τη νέα λέξη-κλειδί JavaScript . Όταν δημιουργείται αυτή η νέα παρουσία της συνάρτησης έχει επίσης ως ιδιότητά της μια τιμή this.name και μια μέθοδο this.sayHello . Όταν δημιουργήσαμε την παρουσία της μεθόδου που περάσαμε στο όνομά μας: var me = new Person ('Adam') . Όταν κοιτάζετε τη μέθοδο sayHello , χρησιμοποιεί αυτό το όνομα, είναι τώρα μέρος αυτής της παρουσίας, για να δημιουργήσετε μια πρόταση. Εάν εκτελέσετε αυτόν τον κώδικα στο NodeJS REPL στο repl.it, θα πρέπει να δείτε τον έξοδο Γεια σας, το όνομά μου είναι Adam .

Τώρα που έχουμε τα βαρετά πράγματα, ας σχεδιάσουμε κάποιον καμβά. Ο τρόπος που δίδαξα αυτήν την επόμενη ενότητα ήταν χρησιμοποιώντας το codepen.io. Αυτό που προτείνω είναι αν θέλετε να ακολουθήσετε, μεταβείτε στο codepen.io, δημιουργήστε έναν λογαριασμό και, στη συνέχεια, δημιουργήστε ένα νέο στυλό και θα πρέπει να είστε έτοιμοι. Φροντίστε να ενεργοποιήσετε τον λογαριασμό σας εάν θέλετε να αποθηκεύσετε την εργασία σας.

Ας σχεδιάσουμε σε καμβά

Πρώτον, πρέπει να δημιουργήσουμε τον καμβά για να μπορέσουμε να το σχεδιάσουμε. Στο HTML σας δημιουργήστε μια ετικέτα καμβά.

Τώρα είναι JavaScript από εδώ και πέρα!

Πρέπει να αρπάξουμε το στοιχείο καμβά από το DOM και να το δηλώσουμε ως μεταβλητή. Αυτό θα μας επιτρέψει να ορίσουμε το περιβάλλον του. Δεν είμαστε τόσο έμπειροι με το "3d", οπότε θα κολλήσουμε με ένα "2d" περιβάλλον.

var canvas = document.getElementById(“canvas”);var context = canvas.getContext(“2d”);

Μπορούμε επίσης να δώσουμε στον καμβά τις ιδιότητες πλάτους και ύψους .

var canvas = document.getElementById(“canvas”);canvas.width = 800;canvas.height = 800;var context = canvas.getContext(“2d”);

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

Τώρα ας τα βάλουμε όλα αυτά σε μια λειτουργία, ώστε να εξοικειωθείτε με τον λειτουργικό προγραμματισμό.

function draw() { var canvas = document.getElementById(“canvas”); canvas.width = 800; canvas.height = 800; var context = canvas.getContext(“2d”);}

Τίποτα δεν θα εμφανιστεί στην οθόνη ακόμα, θα χρησιμοποιήσουμε τη μέθοδο fillRect για να μας βοηθήσουμε με αυτό.

function draw() { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.fillRect(10,10, 100, 200);}

Εάν δεν το έχετε μαντέψει, η μέθοδος fillRect διαρκεί τέσσερις παραμέτρους: x συντεταγμένη, συντεταγμένη y, πλάτος και ύψος. Στον καμβά, ο άξονας x ξεκινά στο 0 στα αριστερά και στο άπειρο πηγαίνει δεξιά. Ο άξονας y ξεκινά στο 0 από την κορυφή και στο άπειρο κατεβαίνει. Έτσι, όταν ξεκινάμε στο (10, 10) τοποθετούμε τον φανταστικό δρομέα στο σημείο (x = 10, y = 10) και πηγαίνουμε 100 προς τα δεξιά και 200 ​​κάτω από αυτό το σημείο.

Όπως ίσως έχετε παρατηρήσει, δεν έχει ακόμη προστεθεί στη σελίδα. Προσθέστε μια απλή συνάρτηση window.onload και κάντε την ίδια με την τελική συνάρτηση.

function draw() { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.fillRect(10,10, 100, 200);}window.onload = draw;

Ίσως αναρωτιέστε γιατί εκτελέστηκε η συνάρτηση ισοπαλίας παρόλο που δεν την εκτελέσαμε με parens (). Αυτό συμβαίνει επειδή το window.onload είναι μια συνάρτηση. Αυτό είναι το ίδιο με το να λέει:

window.onload = function() {// Do stuff here like what we put in draw();}

That means window.onload executes a function when the window is loaded, so what ends up happening is window.onload with its magical powers puts invisible parens around draw, thus executing it. A lot of magic is involved. But now you know the hocus pocus.

Let’s add some color for fun! Here we use the fillStyle method for that. It needs to come before fillRect or it won’t show.

function draw() { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.fillStyle = "blue"; context.fillRect(10,10, 100, 200);}window.onload = draw;

Here is a sample of that on codepen:

Let’s draw some other shapes!

That was pretty simple. Let’s draw some other shapes now. Just as we did before we will create a function and instantiate our canvas with a width, height, and context.

function triangle() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400;}

So we don’t forget, change the onload function to take the triangle function now.

window.onload = triangle;

Now that we have our canvas, let’s start to draw lines on the canvas to create our triangle.

function triangle() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(75, 50);}

Here we are starting our path and moving the cursor to point (x = 75, y = 50).

Now let’s go to town drawing some lines.

function triangle() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(75, 50); context.lineTo(100, 75); context.lineTo(100, 25); context.stroke();}

This created the first two lines that we needed. To finish it off we go back to where we started.

function triangle() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(75, 50); context.lineTo(100, 75); context.lineTo(100, 25); context.lineTo(75, 50); // Back to where we started context.stroke();}

To fill in the triangle we can use the fill method.

function triangle() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(75, 50); context.lineTo(100, 75); context.lineTo(100, 25); context.lineTo(75, 50); context.stroke(); context.fill();}

Here is what that looks like in the wild:

We can do the same thing now and easily create a giant pyramid.

function pyramid() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400;}

Remember to change the onload function to pyramid.

window.onload = pyramid;

Let’s now move the cursor to where we want it to be.

function pyramid() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(200, 0);}

I want my pyramid to take up as much space as possible, so I am starting out at the very top of my canvas and exactly in the middle of the x-axis.

Now we can begin drawing our shape and filling it in.

context.lineTo(0, 400);context.lineTo(400, 400);context.lineTo(200, 0);context.stroke();context.fillStyle = “orange”;context.fill();

Done! You should now have a nice orange pyramid on your screen because of course you are part the Illuminati. Don’t lie!

Here is the finished product that you can play with:

Emojis!

Now for what you came for: Emojis!

Just as we did before we set up our canvas.

function smileyFaceEmoji() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 500; canvas.height = 500;}

Remember to change onload to this function.

window.onload = smileyFaceEmoji;

Now let’s draw our face.

context.beginPath();context.arc(250, 250, 100,0,Math.PI*2, true);context.stroke();

I kind of switched things up here using the arc function. The arc function takes quite a few arguments: x coordinate, y coordinate, radius, starting point in radians, ending point in radians, and whether it is drawn clockwise (we said true). As opposed to how a rectangle is made starting at one point and moving to the next, the point (x = 250, y = 250) is actually the middle of the circle and then extending out 100 pixels.

Cool huh?! Next comes the eyes.

context.moveTo(235, 225);context.arc(225, 225, 10, 0, Math.PI*2, true);context.moveTo(285, 225);context.arc(275, 225, 10, 0, Math.PI*2, true);context.stroke();

Then the mouth.

context.moveTo(250, 275);context.arc(250, 275, 50, 0, Math.PI, false); // Why is this last value false? Why did you just use Math.PI?context.moveTo(250, 275);context.lineTo(200, 275);context.stroke();

Here is what the finished product looks like:

You did it, you just made a smiley face emoji! Gosh darn it I am proud of you! If you want to take your canvas skills to the next level try out one of the exercises below.

Exercises

  1. Draw a poop emoji.
  2. Draw your initials in cursive.

In summary

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

Αν θέλετε να δείτε όλο τον κωδικό για αυτό το μάθημα, μεταβείτε στο codepen εδώ.