HTML-kankaalle selitetty: Johdanto HTML5-kankaalle ja JavaScript-toiminnoille

Ennen emojia, joitain taustoja ...

Aloin työskennellä verkkokehitysalalla noin kuusi kuukautta sitten vietettyäni suurimman osan urastani koulutuksessa. Siirtyminen on ollut hieno, ja olen erittäin kiitollinen mahdollisuudesta työskennellä reaalimaailman verkkosovellusten parissa.

Olen erittäin onnellinen työskennellessäni alalla, mutta minun näkökulmastani on vielä paljon opittavaa. Siksi siitä päivästä lähtien, kun aloitin JavaScript-kehittäjänä, olen jatkanut viettääni aikaa joka ilta taitojeni parantamiseksi.

Opiskelun ohella aloin äskettäin opettaa "Intro JavaScript -kurssille" Tampa Bayn nuorille (The Iron Yardissa St.Pete, Florida). Tämä on ollut hieno kokemus monista syistä. Ensinnäkin se on haastanut minut oppimaan lisää JavaScript-kielen monimutkaisuudesta ja vivahteista.

Toiseksi minulla on mahdollisuus opettaa uudelleen, mikä on yksi intohimoni. Ja kolmanneksi, minun on tarkasteltava uudelleen, kuinka opin oppia ohjelmoimaan ja miten se eroaa dramaattisesti aloittelijoista, jotka eivät ole edes varmoja siitä, pitävätkö he koodauksesta ja joissain tapauksissa eivät voineet välittää vähemmän siitä, mitä minulla on sanottavaa.

Opetussuunnitelma, jonka alun perin ajattelin olevan loistava tälle luokalle, oli JavaScript kolmella tavalla: JS DOM: ssä, JS palvelimella ja toimiva JS-ohjelmointi.

Ensimmäisen päivän jälkeen ja opettajien avustajien kanssa käydyn hyvän keskustelun jälkeen tajusin, että olin täysin poissa käytöstä. Nämä aiheet saattavat kiinnostaa minua, mutta eivät varmasti viihdytä nuoria, jotka vain haluavat pelata lisätuetettuja pelejä selaimessa. Arvioin täysin uudelleen sen, mitä opetin, ja aloin samalla pitää hauskaa!

Alla on ensimmäinen oppitunti, jonka annoin opiskelijoille ja jossa aloitan keskustelun toiminnoista ja päädyin luomaan hymiö kasvot emojin. Nauttia!

Jos haluat seurata, kun puhumme toiminnoista, avaa selain ja siirry osoitteeseen repl.it. Valitse suosittujen kielten alla NodeJS. REPL (Read Evaluate Print Loop) pitäisi avautua sinulle ja voit seurata koodia.

Mitä toiminnot ovat?

Ymmärtääksemme kuinka käytämme HTML5-kangasta, meidän on ymmärrettävä hieman toiminnoista.

”Funktiot ovat itsenäisiä koodimoduuleja, jotka suorittavat tietyn tehtävän. Toiminnot yleensä "ottavat" tietoja, käsittelevät ne ja "palauttavat" tuloksen. Kun funktio on kirjoitettu, sitä voidaan käyttää uudestaan ​​ja uudestaan. "

Anna nyt antaa sinulle muutama esimerkki toiminnoista, joita käsittelemme.

Toimintotyypit

Säännöllinen Ole-funktio

Me julistamme perustehtävänä käyttämällä JavaScript-avainsanaa toiminto .

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

Tämä toiminto ottaa yhden parametrin nimeltä nimi . Se on muuttuja, joka välitetään sayHelloTo- funktiolle. Siksi, kun ohjelma suoritetaan, se välittää sen, mitä tarjotaan. Minun tapauksessani se on Adam , joten konsolissa näet Hello Adam .

Rakentajan malli

Voimme myös luoda funktion konstruktorikuvion avulla.

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

Javascript avainsana tämä viittaa toiminnon. Tämä tarkoittaa sitä, että välitämme muuttujan kaltaisen nimen , kuten aiemmin, voimme liittää sen funktioon ja mihin tahansa sen funktion esiintymään. Esimerkin luomiseen käytämme JavaScript-avainsanaa new . Kun tämä uusi funktion esiintymä luodaan, sen ominaisuuksina on myös this.name- arvo ja this.sayHello- menetelmä. Kun loimme menetelmän esimerkin, jonka läpäisimme nimessämme : var me = new Person ('Adam') . Kun tarkastelet sayHello- menetelmää, se käyttää kyseistä nimeä, joka on nyt osa tätä tapausta, lauseen luomiseksi. Jos suoritat tämän koodin NodeJS REPL -sovelluksessa repl.it: ssä, sinun pitäisi nähdä se tulostettavaksi Hei, nimeni on Adam .

Nyt kun saimme tylsät tavarat, piirtäkäämme kankaalle. Tapa, jolla opetin tämän seuraavan osan, käytti koodepen.io-tiedostoa. Ehdotan, että jos haluat seurata, siirry osoitteeseen codepen.io, luo tili, luo sitten uusi kynä ja sinun pitäisi olla asetettu. Muista aktivoida tilisi, jos haluat tallentaa työsi.

Piirretään kankaalle

Ensinnäkin meidän on luotava kangas voidaksemme piirtää siihen. Luo HTML-koodissasi kangasmerkki.

Nyt se on JavaScript täältä!

Meidän on tartuttava kankaamme elementtiin DOM: sta ja julistettava se muuttujaksi. Tämän avulla voimme asettaa sen kontekstin. Emme ole vielä niin taitavia 3D: n suhteen, joten pidämme kiinni 2d-kontekstista.

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

Voimme myös antaa kankaalle sen leveys- ja korkeusominaisuudet .

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

Haluan huomauttaa tässä, että kangas toimii täsmälleen kuin esine. Sillä on ominaisuuksia ja menetelmiä aivan kuten näimme yllä olevasta rakennustoiminnostamme. Hieman erilainen tapa, jolla ilmoitimme sen, mutta toiminnallisesti se toimii hyvin samankaltaisesti. Niin näet, että se on korkeus ja leveys ominaisuuksia sekä getContext menetelmällä.

Nyt laitetaan kaikki tämä toimintoon, jotta voit perehtyä jonkin verran toiminnalliseen ohjelmointiin.

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

Mikään ei näy näytöllä vielä, käytämme fillRect- menetelmää auttaaksemme meitä siinä.

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

Jos et ole arvannut sitä, fillRect- menetelmä ottaa neljä parametria: x-koordinaatti, y-koordinaatti, leveys ja korkeus. Kankaalla x-akseli alkaa 0: sta vasemmalta ja äärettömään oikealle. Y-akseli alkaa 0: sta ylhäältä ja äärettömyyteen alaspäin. Joten kun aloitamme kohdasta (10, 10), asetamme kuvitteellisen kohdistimen pisteeseen (x = 10, y = 10) ja menemme 100 oikealle ja 200 alaspäin siitä pisteestä.

Kuten olet ehkä huomannut, sitä ei ole vielä lisätty sivulle. Lisää yksinkertainen ikkuna .

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;

Saatat ihmetellä, miksi piirtotoiminto suoritettiin, vaikka emme suorittaneet sitä pareneilla (). Tämä johtuu siitä, että window.onload on toiminto. Se on sama kuin sanoa:

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

Tässä oppitunnissa opit funktioista: kuinka luoda toimintoja, suorittaa toimintoja ja käyttää funktioita pienten ohjelmien rakentamiseen, jotka piirtävät viivoja kankaalle. Opimme, että toiminnoilla on monia muotoja ja niille voidaan antaa ominaisuuksia ja menetelmiä. Toivon, että nautitte tästä oppitunnista, koska aikomuksenani oli näyttää teille toimintojen voima työntämättä sinua ammattikiellolla sen sijaan, että visuaalisten ärsykkeiden avulla saat ne eloon!

Jos haluat nähdä kaikki tämän oppitunnin koodit, siirry koodikynääni täällä.