Erklärtes HTML-Canvas: Eine Einführung in HTML5-Canvas- und JavaScript-Funktionen

Vor dem Emoji einige Hintergrundinformationen…

Ich habe vor ungefähr 6 Monaten angefangen, im Bereich Webentwicklung zu arbeiten, nachdem ich den größten Teil meiner Karriere in der Ausbildung verbracht hatte. Der Übergang war großartig und ich bin sehr dankbar für die Gelegenheit, an realen Webanwendungen zu arbeiten.

Ich arbeite sehr gerne in der Branche, aber aus meiner Sicht gibt es noch viel zu lernen. Daher habe ich von dem Tag an, an dem ich als JavaScript-Entwickler angefangen habe, weiterhin jeden Abend Zeit damit verbracht, meine Fähigkeiten zu verbessern.

Neben dem Studium habe ich kürzlich begonnen, Teenagern in Tampa Bay (im Iron Yard in St.Pete, Florida) einen "Intro to JavaScript Course" beizubringen. Dies war aus vielen Gründen eine großartige Erfahrung. Erstens hat es mich herausgefordert, mehr über die Feinheiten und Nuancen der JavaScript-Sprache zu erfahren.

Zweitens habe ich die Chance bekommen, wieder zu unterrichten, was eine meiner Leidenschaften ist. Und drittens musste ich noch einmal untersuchen, wie ich das Programmieren gelernt habe und wie sich das drastisch von Anfängern unterscheidet, die sich nicht einmal sicher sind, ob sie gerne programmieren und sich in einigen Fällen nicht weniger darum kümmern, was ich zu sagen habe.

Sie sehen, der Lehrplan, von dem ich ursprünglich dachte, dass er für diese Klasse großartig wäre, war in dreierlei Hinsicht JavaScript: JS im DOM, JS auf dem Server und funktionale JS-Programmierung.

Nach dem ersten Tag und einem guten Gespräch mit meinen Lehrassistenten wurde mir klar, dass ich völlig außer Kontrolle geraten war. Diese Themen mögen mich interessieren, aber sicherlich keinen Jugendlichen unterhalten, der nur von Add gesponserte Spiele im Browser spielen möchte. Ich habe völlig neu bewertet, was ich unterrichten würde, und dabei begann ich Spaß zu haben!

Unten ist die erste Lektion, die ich den Schülern gegeben habe, in der ich anfange, Funktionen zu besprechen und am Ende ein Smiley-Emoji zu erstellen. Genießen!

Wenn Sie mitverfolgen möchten, während wir über Funktionen sprechen, öffnen Sie einen Browser und gehen Sie zu repl.it. Wählen Sie unter gängigen Sprachen NodeJS. Eine REPL (Read Evaluate Print Loop) sollte sich für Sie öffnen und Sie können dem Code folgen.

Was sind Funktionen?

Um zu verstehen, wie wir HTML5-Canvas verwenden, müssen wir ein wenig über Funktionen verstehen.

„Funktionen sind in sich geschlossene Codemodule, die eine bestimmte Aufgabe erfüllen. Funktionen „nehmen“ normalerweise Daten auf, verarbeiten sie und „geben“ ein Ergebnis zurück. Sobald eine Funktion geschrieben ist, kann sie immer wieder verwendet werden. “

Lassen Sie mich nun einige Beispiele für die Art der Funktionen geben, mit denen wir uns befassen werden.

Funktionstypen

Regelmäßige Ole 'Funktion

Wir erklären , eine Grundfunktion der JavaScript - Schlüsselwort Funktion .

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

Diese Funktion verwendet einen Parameter namens name . Es ist eine Variable, die an die Funktion sayHelloTo übergeben wird. Wenn das Programm ausgeführt wird, wird es daher übergeben, was bereitgestellt wird. In meinem Fall ist es Adam , also sehen Sie in der Konsole Hallo Adam .

Konstruktormuster

Wir können auch eine Funktion mit dem Konstruktormuster erstellen.

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

Die JavaScript - Schlüsselwort dies auf die Funktion verweist. Das heißt, wenn wir wie zuvor eine Variable wie name übergeben , können wir sie der Funktion und jeder Instanz dieser Funktion zuweisen. Um eine Instanz zu erstellen, verwenden wir das JavaScript-Schlüsselwort new . Wenn diese neue Instanz der Funktion erstellt wird, hat sie auch einen this.name- Wert und eine this.sayHello- Methode als Eigenschaften . Als wir die Instanz der Methode erstellt haben, haben wir unseren Namen übergeben: var me = new Person ('Adam') . Wenn Sie sich die sayHello- Methode ansehen , wird dieser Name verwendet, das ist jetzt Teil dieser Instanz, um einen Satz zu erstellen. Wenn Sie diesen Code in der NodeJS REPL auf repl.it ausführen, sollte er ausgegeben werden. Hallo, mein Name ist Adam .

Nachdem wir das langweilige Zeug aus dem Weg geräumt haben, zeichnen wir auf eine Leinwand. Die Art und Weise, wie ich diesen nächsten Abschnitt unterrichtete, war die Verwendung von codepen.io. Ich schlage vor, wenn Sie mitmachen möchten, gehen Sie zu codepen.io, erstellen Sie ein Konto, erstellen Sie einen neuen Stift und Sie sollten eingestellt sein. Stellen Sie sicher, dass Sie Ihr Konto aktivieren, wenn Sie Ihre Arbeit speichern möchten.

Lassen Sie uns auf Leinwand zeichnen

Zuerst müssen wir die Leinwand erstellen, um darauf zeichnen zu können. Erstellen Sie in Ihrem HTML-Code ein Canvas-Tag.

Jetzt ist es JavaScript von hier an!

Wir müssen unser Canvas-Element aus dem DOM holen und es als Variable deklarieren. Dadurch können wir den Kontext festlegen. Wir sind noch nicht so gut mit '3d' vertraut, also bleiben wir bei einem '2d'-Kontext.

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

Wir können der Leinwand auch ihre Eigenschaften für Breite und Höhe geben .

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

Ich möchte hier darauf hinweisen, dass sich die Leinwand genau wie ein Objekt verhält. Es hat Eigenschaften und Methoden, wie wir sie oben aus unserer Konstruktorfunktion gesehen haben. Etwas anders, wie wir es deklariert haben, aber funktional funktioniert es sehr ähnlich. Sie sehen also , dass es Höhe und Breite Eigenschaften sowie eine getContext Methode.

Lassen Sie uns nun all das in eine Funktion einfügen, damit Sie sich mit der funktionalen Programmierung vertraut machen können.

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

Es wird noch nichts auf dem Bildschirm angezeigt. Wir werden die fillRect- Methode verwenden, um uns dabei zu helfen.

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

Wenn Sie es nicht erraten haben, verwendet die fillRect- Methode vier Parameter: x-Koordinate, y-Koordinate, Breite und Höhe. Auf der Leinwand beginnt die x-Achse links bei 0 und geht bis unendlich nach rechts. Die y-Achse beginnt bei 0 von oben und geht bis ins Unendliche. Wenn wir also bei (10, 10) beginnen, platzieren wir den imaginären Cursor auf Punkt (x = 10, y = 10) und gehen 100 nach rechts und 200 nach unten von diesem Punkt.

Wie Sie vielleicht bemerkt haben, wurde es der Seite noch nicht hinzugefügt. Fügen Sie eine einfache window.onload- Funktion hinzu und lassen Sie sie unserer fertigen Zeichenfunktion entsprechen .

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;

Sie fragen sich vielleicht, warum die Zeichenfunktion ausgeführt wurde, obwohl wir sie nicht mit parens () ausgeführt haben. Das liegt daran, dass window.onload eine Funktion ist. Das ist das gleiche wie zu sagen:

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.