HTML vászon magyarázata: Bevezetés a HTML5 vászonba és a JavaScript funkciókba

Az Emoji előtt néhány háttér…

Körülbelül 6 hónappal ezelőtt kezdtem el dolgozni a webfejlesztési területen, miután karrierem nagy részét az oktatásban töltöttem. Az átmenet nagyszerű volt, és nagyon hálás vagyok a lehetőségért, hogy valós webes alkalmazásokkal dolgozhassak.

Nagyon boldog vagyok az iparban, de az én szemszögemből még mindig van mit tanulnom. Ezért attól a naptól kezdve, amikor JavaScript-fejlesztőként kezdtem, továbbra is minden este tanulmányozással töltöttem a képességeimet.

Tanulmányok mellett a közelmúltban elkezdtem tanítani egy „Intro a JavaScript tanfolyamra” tampai öbölbeli tinédzsereknek (a The Iron Yard-ban, St.Pete, Florida). Ez sok okból nagyszerű élmény volt. Először is arra késztetett, hogy többet tudjak meg a JavaScript nyelv bonyolultságairól és árnyalatairól.

Másodszor, alkalmat kaptam arra, hogy újra tanítsak, ami az egyik szenvedélyem. Harmadszor pedig át kellett vizsgálnom, hogyan tanultam meg programozni, és ez miben különbözik drasztikusan azoktól a kezdőktől, akik még abban sem biztosak, hogy szeretik-e a kódolást, és egyes esetekben kevésbé érdekelhetik a mondanivalóm.

Látja, hogy a tananyag, amelyről eredetileg azt hittem, hogy remek lenne ehhez az osztályhoz, a JavaScript három szempontból volt: JS a DOM-ban, JS a szerveren és funkcionális JS programozás.

Az első nap és a tanársegédek jó beszélgetése után rájöttem, hogy teljesen kikapcsolódtam. Ezek a témák érdekelhetnek, de biztosan nem szórakoztatnak egy olyan fiatalt, aki csak kiegészítő támogatott játékokat szeretne játszani a böngészőben. Teljesen átértékeltem, amit tanítani fogok, és közben szórakozni kezdtem!

Az alábbiakban látható az első lecke, amelyet a hallgatóknak tartottam, ahol elkezdem megvitatni a funkciókat, és végül létrehozok egy mosolygós hangulatjelet. Élvezd!

Ha követni szeretné a funkciókról való beszélgetést, nyisson meg egy böngészőt, és lépjen az repl.it oldalra, és a népszerű nyelvek alatt válassza a NodeJS parancsot. Meg kell nyitnia az Ön számára a REPL (Read Evaluate Print Loop) elemet, és követheti a kóddal együtt.

Mik a funkciók?

Ahhoz, hogy megértsük, hogyan fogjuk használni a HTML5 vásznat, meg kell értenünk egy kicsit a funkciókat.

„A függvények önálló kódmodulok, amelyek egy adott feladatot teljesítenek. A funkciók általában „befogadják” az adatokat, feldolgozzák azokat és „visszaküldik” az eredményt. Ha egy függvény meg van írva, újra és újra használható. "

Most hadd mondjak néhány példát a függvények típusára, amelyekkel foglalkozni fogunk.

Funkciótípusok

Rendszeres Ole 'funkció

Kijelentjük alap funkciót a JavaScript kulcsszó funkciót .

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

Ez a függvény egy paramétert hívott nevét . Ez egy változó, amelyet a sayHelloTo függvénynek adunk át . Ezért, amikor a program végrehajtja, átadja a biztosítottakat. Az én esetemben Ádámról van szó , tehát a konzolban látni fogja Helló Ádámot .

Konstruktor minta

A konstruktor minta segítségével létrehozhatunk egy függvényt is.

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

A Javascript kulcsszó ez a függvényre utal. Ez azt jelenti, amikor átadunk egy olyan változót, mint a név , csakúgy, mint korábban, hozzárendelhetjük a függvényhez és a függvény bármely példányához. Példány létrehozásához az új JavaScript kulcsszót használjuk . A függvény új példányának létrehozásakor a tulajdonságai egy this.name érték és egy this.sayHello módszer. Amikor létrehoztuk a nevünkben átadott módszer példányát: var me = new Person ('Adam') . Ha megnézi a sayHello módszert, akkor ezt a nevet használja, ez most része annak a példának a létrehozására egy mondatot. Ha ezt a kódot a repl.it NodeJS REPL-ben hajtja végre, akkor látnia kell a kimenetet Hello. A nevem Adam .

Most, hogy letudtuk az unalmas dolgokat, rajzoljunk néhány vászonra. A következő szakasz tanításának módja a codepen.io használata volt. Azt javaslom, ha követni akarja, látogasson el a codepen.io oldalra, hozzon létre egy fiókot, majd hozzon létre egy új tollat, és be kell állítania. Feltétlenül aktiválja fiókját, ha el akarja menteni a munkáját.

Rajzoljunk vászonra

Először létre kell hoznunk a vásznat, hogy rá tudjunk rajzolni. A HTML-ben hozzon létre egy vászoncímkét.

Mostantól ez a JavaScript!

Meg kell ragadnunk a vászon elemünket a DOM-ból, és deklarálnunk kell változónak. Ez lehetővé teszi számunkra a kontextus beállítását. Még nem vagyunk olyan jártasak a „3d” -ben, ezért ragaszkodunk a „2d” kontextushoz.

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

Megadhatjuk a vászon szélességi és magassági tulajdonságait is.

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

Itt szeretném kiemelni, hogy a vászon pontosan úgy viselkedik, mint egy tárgy. Tulajdonságai és módszerei pontosan olyanok, mint a fenti konstruktor funkciónkból láttuk. Kissé különbözik attól, ahogyan deklaráltuk, de funkcionálisan nagyon hasonlóan működik. Tehát látja, hogy rendelkezik magassági és szélességi tulajdonságokkal, valamint getContext módszerrel.

Most tegyük mindezt egy funkcióba, hogy kissé megismerhesse a funkcionális programozást.

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

A képernyőn egyelőre semmi nem jelenik meg, ebben a fillRect módszert fogjuk használni .

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

Ha még nem sejtette, a fillRect metódus négy paramétert vesz fel: x koordináta, y koordináta, szélesség és magasság. A vásznon az x tengely 0-tól kezdődik bal oldalon, és a végtelenig jobbra megy. Az y tengely 0-tól indul felülről és a végtelenig lefelé. Tehát amikor a (10, 10) pontnál kezdjük, akkor a képzeletbeli kurzort az (x = 10, y = 10) pontra helyezzük, és ettől a ponttól jobbra és 200-at megyünk lefelé.

Mint észrevette, még mindig nem került fel az oldalra. Adjon hozzá egy egyszerű window.onload függvényt, amely megegyezik a kész rajzfunkciónkkal.

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;

Kíváncsi lehet, miért hajtották végre a rajz funkciót, annak ellenére, hogy nem parens () paranccsal hajtottuk végre . Ez azért van, mert az window.onload egy függvény. Ez ugyanaz, mint azt mondani:

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.