HTML Canvas Explained: En introduktion til HTML5 Canvas og JavaScript-funktioner

Før Emoji, noget baggrund ...

Jeg begyndte at arbejde inden for webudvikling for omkring 6 måneder siden efter at have tilbragt det meste af min karriere i uddannelse. Overgangen har været stor, og jeg er meget taknemmelig for muligheden for at arbejde på virkelige webapplikationer.

Jeg er meget glad for at arbejde i branchen, men fra mit perspektiv er der stadig meget at lære. Derfor, fra den dag jeg startede som JavaScript-udvikler, har jeg fortsat brugt tid på at studere hver aften for at udjævne mine færdigheder.

Sammen med at studere begyndte jeg for nylig at undervise i et 'Intro til JavaScript-kursus' til teenagere i Tampa Bay (på The Iron Yard i St. Pete, Florida). Dette har været en stor oplevelse af mange grunde. For det første har det udfordret mig til at lære mere om JavaScript-sprogets indviklede og nuancer.

For det andet har jeg fået en chance for at undervise igen, hvilket er en af ​​mine lidenskaber. Og for det tredje fik jeg til at genoverveje, hvordan jeg lærte at programmere, og hvordan det adskiller sig drastisk fra begyndere, der ikke engang er sikre på, om de kan lide kodning og i nogle tilfælde ikke kunne bryde sig mindre om, hvad jeg har at sige.

Ser du, læseplanen, som jeg oprindeligt troede ville være fantastisk til denne klasse, var JavaScript på tre måder: JS i DOM, JS på serveren og funktionel JS-programmering.

Efter den første dag og en god snak med mine undervisningsassistenter indså jeg, at jeg var helt væk fra basen. Disse emner kan interessere mig, men bestemt ikke underholde en ungdom, der bare vil spille add-sponsorerede spil i browseren. Jeg revurderede fuldstændigt, hvad jeg ville undervise, og begyndte undervejs at have det sjovt!

Nedenfor er den første lektion, jeg gav eleverne, hvor jeg begynder at diskutere funktioner og ender med at skabe et smiley-emoji. God fornøjelse!

Hvis du vil følge med, når vi taler om funktioner, skal du åbne en browser og gå til repl.it og under populære sprog vælge NodeJS. En REPL (Read Evaluate Print Loop) skal åbnes for dig, og du kan følge med koden.

Hvad er funktioner?

For at forstå hvordan vi bruger HTML5 lærred, skal vi forstå lidt om funktioner.

“Funktioner er selvstændige moduler med kode, der udfører en bestemt opgave. Funktioner "tager" data ind, behandler dem og returnerer et resultat. Når en funktion er skrevet, kan den bruges igen og igen. ”

Lad mig nu give dig et par eksempler på den type funktioner, vi skal beskæftige os med.

Funktionstyper

Regelmæssig Ole-funktion

Vi erklærer en grundlæggende funktion ved hjælp af JavaScript nøgleordet funktion .

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

Denne funktion tager en parameter kaldet navn . Det er en variabel, der sendes til funktionen sayHelloTo . Derfor, når programmet udføres, vil det passere i det, der leveres. I mit tilfælde er det Adam , så i konsollen vil du se Hello Adam .

Konstruktørmønster

Vi kan også oprette en funktion ved hjælp af konstruktormønsteret.

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

Den Javascript søgeord dette refererer til funktionen. Hvad det betyder er, når vi passerer i en variabel som navnet , ligesom vi gjorde før, kan vi tildele det til funktionen og enhver forekomst af den funktion. For at oprette en forekomst bruger vi JavaScript-nøgleordet nyt . Når denne nye forekomst af funktionen oprettes, har den også sine egenskaber en this.name- værdi og en this.sayHello- metode. Da vi oprettede forekomsten af ​​metoden, passerede vi i vores navn: var me = new Person ('Adam') . Når du ser på sayHello- metoden, bruger den det navn, det er nu en del af den instans, for at oprette en sætning. Hvis du udfører denne kode i NodeJS REPL på repl.it, skal du se den output Hej, mit navn er Adam .

Nu hvor vi har de kedelige ting ude af vejen, lad os tegne på noget lærred. Den måde, jeg lærte dette næste afsnit på, var at bruge codepen.io. Hvad jeg foreslår er, hvis du vil følge med, gå til codepen.io, oprette en konto, derefter oprette en ny pen, og du skal være indstillet. Sørg for at aktivere din konto, hvis du vil gemme dit arbejde.

Lad os tegne på lærred

Først skal vi oprette lærredet for at kunne tegne på det. Opret et canvas-tag i din HTML.

Nu er det JavaScript herfra!

Vi er nødt til at tage vores lærredselement fra DOM og erklære det som en variabel. Dette giver os mulighed for at indstille dens kontekst. Vi er ikke så dygtige med '3d' endnu, så vi holder fast i en '2d' kontekst.

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

Vi kan også give lærredet dets egenskaber for bredde og højde .

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

Jeg vil her påpege, at lærredet fungerer nøjagtigt som et objekt. Det har egenskaber og metoder, ligesom vi så fra vores konstruktørfunktion ovenfor. Lidt anderledes i, hvordan vi erklærede det, men funktionelt fungerer det meget ens. Så du kan se, at det har højde og bredde egenskaber samt en getContext metode.

Lad os nu sætte alt dette i en funktion, så du kan blive lidt fortrolig med funktionel programmering.

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

Intet vises lige nu på skærmen, vi bruger metoden fillRect til at hjælpe os med det.

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

Hvis du ikke har gættet det, tager fillRect- metoden fire parametre: x-koordinat, y-koordinat, bredde og højde. På lærred starter x-aksen ved 0 til venstre og til uendelig går højre. Y-aksen starter ved 0 fra toppen og til uendelig nedadgående. Så når vi starter ved (10, 10) placerer vi den imaginære markør på punktet (x = 10, y = 10) og går 100 til højre og 200 ned fra det punkt.

Som du måske har bemærket, er det stadig ikke blevet tilføjet til siden endnu. Tilføj et simpelt vindue. Download- funktion, og få den til at ligne vores færdige tegnefunktion.

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;

Du undrer dig måske over, hvorfor tegnefunktionen blev udført, selvom vi ikke udførte den med parens (). Det skyldes, at window.onload er en funktion. Det er det samme som at sige:

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

I denne lektion lærte du om funktioner: hvordan man opretter funktioner, udfører funktioner og bruger funktioner til at opbygge små programmer, der tegner linjer på et lærred. Vi lærte, at funktioner har mange former og kan gives egenskaber og metoder. Jeg håber, at du nød denne lektion, da det var min hensigt at vise dig kraften i funktioner uden at binde dig ned med jargon, i stedet for at bruge visuelle stimuli til at bringe dem til liv!

Hvis du vil se al koden til denne lektion, skal du gå til min kodepen her.