Objašnjeno HTML platno: Uvod u HTML5 platno i JavaScript funkcije

Programiranje

Prije emojija, malo pozadine ...

Počeo sam raditi u području web razvoja prije otprilike 6 mjeseci nakon što sam veći dio karijere proveo u obrazovanju. Prijelaz je bio sjajan i vrlo sam zahvalan na prilici da radim na stvarnim web aplikacijama.

Jako sam sretan što radim u industriji, ali iz moje perspektive još se može puno naučiti. Stoga, od dana kada sam počeo raditi kao programer za JavaScript, nastavio sam provoditi vrijeme proučavajući svaku večer kako bih povisio svoje vještine.

Uz studiranje, nedavno sam počeo podučavati 'Uvod u tečaj JavaScript' tinejdžerima iz Tampa Baya (u The Iron Yard u St. To je iz mnogih razloga bilo izvrsno iskustvo. Prvo, izazvao me je saznati više o zamršenosti i nijansama jezika JavaScript.

Drugo, ponovno sam dobio priliku podučavati, što je jedna od mojih strasti. I treće, morao sam preispitati kako sam naučio programirati i kako se to drastično razlikuje od početnika koji čak nisu sigurni vole li kodiranje, a u nekim slučajevima ne mogu mariti za ono što imam za reći.

Vidite, kurikulum za koji sam prvotno smatrao da bi bio sjajan za ovu nastavu bio je JavaScript na tri načina: JS u DOM-u, JS na poslužitelju i funkcionalno JS programiranje.

Nakon prvog dana, i dobrog razgovora s mojim asistentima, shvatio sam da sam potpuno izvan baze. Ove će me teme možda zanimati, ali sigurno ne zabavljaju mlade ljude koji samo žele igrati igrice sponzorirane dodatkom u pregledniku. Potpuno sam preispitao ono što bih predavao i počeo se zabavljati!

Ispod je prva lekcija koju sam održao studentima, gdje sam započeo raspravu o funkcijama i na kraju stvorio emoji smajliće. Uživati!

Ako želite pratiti dok razgovaramo o funkcijama, otvorite preglednik i idite na repl.it i na popularnim jezicima odaberite NodeJS. Trebao bi vam se otvoriti REPL (Read Evaluate Print Loop) i možete slijediti kôd.

Što su funkcije?

Da bismo razumjeli kako ćemo koristiti HTML5 platno, moramo malo razumjeti funkcije.

„Funkcije su samostalni moduli koda koji izvršavaju određeni zadatak. Funkcije obično "uzimaju" podatke, obrađuju ih i "vraćaju" rezultat. Jednom kada je funkcija napisana, može se koristiti uvijek iznova. "

Sada ću vam dati nekoliko primjera vrste funkcija s kojima ćemo se baviti.

Vrste funkcija

Uobičajena Ole 'funkcija

Izjavljujemo osnovnu funkciju pomoću JavaScript ključne funkcije .

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

Ova funkcija uzima jedan parametar koji se naziva ime . To je varijabla koja se prenosi funkciji sayHelloTo . Stoga, kada se program izvrši, preći će u ono što je predviđeno. U mom slučaju to je Adam , pa ćete na konzoli vidjeti Hello Adam .

Uzorak konstruktora

Funkciju možemo stvoriti i pomoću uzorka konstruktora.

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

Javascript ključne riječi to se odnosi na funkciju. To znači da kada prenesemo varijablu poput imena , baš kao i prije, možemo je dodijeliti funkciji i bilo kojoj instanci te funkcije. Za stvaranje instance koristimo JavaScript ključnu riječ new . Kada je stvorena ova nova instanca funkciji ona također ima kao njegova svojstva this.name vrijednosti i this.sayHello metoda. Kada smo kreirali instancu metode koju smo proslijedili u svoje ime: var me = nova osoba ('Adam') . Kada pogledate sayHello metodu, ona koristi taj naziv, koji je sada dio te instance, za stvaranje rečenice. Ako izvršite ovaj kôd u NodeJS REPL na repl.it, trebali biste ga vidjeti kako izgleda. Zdravo, moje ime je Adam .

Sad kad smo izbacili dosadne stvari, nacrtajmo malo platna. Način na koji sam predavao ovaj sljedeći odjeljak bio je korištenje codepen.io. Ono što predlažem je da ako želite nastaviti, idite na codepen.io, otvorite račun, a zatim stvorite novu olovku i trebali biste biti postavljeni. Svakako aktivirajte svoj račun ako želite sačuvati svoj rad.

Crtajmo na platnu

Prvo, moramo stvoriti platno da bismo na njemu mogli crtati. U svom HTML-u stvorite oznaku platna.

Od sada je to JavaScript!

Moramo zgrabiti naš element platna iz DOM-a i proglasiti ga promjenljivom. To će nam omogućiti da postavimo njegov kontekst. Još nismo toliko vješti s '3d', pa ćemo se držati '2d' konteksta.

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

Platnu također možemo dati svojstva širine i visine .

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

Ovdje želim naglasiti da platno djeluje točno poput predmeta. Ima svojstva i metode baš kao što smo vidjeli iz naše gornje funkcije konstruktora. Nešto drugačiji u načinu na koji smo ga proglasili, ali funkcionalno djeluje vrlo slično. Dakle, vidite da ima svojstva visine i širine, kao i getContext metodu.

Sad stavimo sve to u funkciju tako da se možete ponešto upoznati s funkcionalnim programiranjem.

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

Još se ništa neće prikazati na ekranu, upotrijebit ćemo metodu fillRect u tome.

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

Ako niste pogodili, metoda fillRect uzima četiri parametra: x koordinata, y koordinata, širina i visina. Na platnu, os x započinje s 0 s lijeve strane i u beskonačnost idući desno. Os y započinje na 0 od vrha i do beskonačnosti prema dolje. Dakle, kad započnemo s (10, 10), postavljamo zamišljeni kursor na točku (x = 10, y = 10) i idemo 100 desno i 200 dolje od te točke.

Kao što ste možda primijetili, još uvijek nije dodan na stranicu. Dodajte jednostavnu funkciju window.onload i neka bude jednaka našoj završenoj funkciji crtanja.

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;

Možda se pitate zašto je izvršena funkcija crtanja iako je nismo izvršili s parens (). To je zato što je window.onload funkcija. To je isto kao kad kažete:

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

In this lesson you learned about functions: how to create functions, execute functions, and use functions to build small programs that draw lines on a canvas. We learned that functions take many forms and can be given properties and methods. I hope you enjoyed this lesson as it was my intention to show you the power of functions without bogging you down with jargon, instead using visual stimuli to bring them to life!

If you want to see all the code for this lesson go to my codepen here.