HTML Canvas explicado: Introducción a las funciones de HTML5 Canvas y JavaScript

Antes del Emoji, algunos antecedentes ...

Comencé a trabajar en el campo del desarrollo web hace unos 6 meses después de dedicar la mayor parte de mi carrera a la educación. La transición ha sido excelente y estoy muy agradecido por la oportunidad de trabajar en aplicaciones web del mundo real.

Estoy muy feliz trabajando en la industria, pero desde mi perspectiva, todavía hay mucho que aprender. Por lo tanto, desde el día que comencé como desarrollador de JavaScript, he seguido dedicando tiempo a estudiar cada noche para mejorar mis habilidades.

Además de estudiar, recientemente comencé a enseñar un 'Curso de introducción a JavaScript' a adolescentes de Tampa Bay (en The Iron Yard en St. Pete, Florida). Esta ha sido una gran experiencia por muchas razones. Primero, me ha desafiado a aprender más sobre las complejidades y matices del lenguaje JavaScript.

En segundo lugar, he tenido la oportunidad de volver a enseñar, que es una de mis pasiones. Y tercero, tengo que reexaminar cómo aprendí a programar y cómo eso difiere drásticamente de los principiantes que ni siquiera están seguros de si les gusta codificar y, en algunos casos, no les importa lo que tengo que decir.

Verá, el plan de estudios que originalmente pensé que sería excelente para esta clase era JavaScript de tres maneras: JS en DOM, JS en el servidor y programación JS funcional.

Después del primer día, y de una buena conversación con mis asistentes de enseñanza, me di cuenta de que estaba totalmente fuera de lugar. Estos temas pueden interesarme, pero ciertamente no entretienen a un joven que solo quiere jugar juegos patrocinados por complementos en el navegador. Reevalué totalmente lo que iba a enseñar, ¡y en el proceso comencé a divertirme!

A continuación se muestra la primera lección que les di a los estudiantes en la que comienzo discutiendo las funciones y termino creando un emoji de cara sonriente. ¡Disfrutar!

Si desea seguir mientras hablamos de funciones, abra un navegador y vaya a repl.it y en los idiomas populares elija NodeJS. Un REPL (Read Evaluate Print Loop) debería abrirse para usted y puede seguir el código.

¿Qué son funciones?

Para comprender cómo usaremos el lienzo HTML5, debemos comprender un poco las funciones.

“Las funciones son módulos de código autónomos que realizan una tarea específica. Las funciones generalmente “toman” datos, los procesan y “devuelven” un resultado. Una vez que se escribe una función, se puede usar una y otra vez ".

Ahora déjeme darle algunos ejemplos del tipo de funciones con las que nos ocuparemos.

Tipos de funciones

Función de Ole regular

Declaramos una función básica usando la función de palabra clave de JavaScript .

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

Esta función toma un parámetro llamado nombre . Es una variable que se pasa a la función sayHelloTo . Por lo tanto, cuando el programa se ejecuta, pasará lo que se proporciona. En mi caso es Adam , por lo que en la consola verás Hello Adam .

Patrón de constructor

También podemos crear una función usando el patrón constructor.

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

La palabra clave de Javascript esto se refiere a la función. Lo que eso significa es que cuando pasamos una variable como name , como hicimos antes, podemos asignarla a la función y cualquier instancia de esa función. Para crear una instancia usamos la palabra clave JavaScript new . Cuando se crea esta nueva instancia de la función, también tiene como propiedades un valor this.name y un método this.sayHello . Cuando creamos la instancia del método pasamos nuestro nombre: var me = new Person ('Adam') . Cuando miras el método sayHello , usa ese nombre, que ahora es parte de esa instancia, para crear una oración. Si ejecuta este código en el REPL de NodeJS en repl.it, debería verlo como resultado Hola, mi nombre es Adam .

Ahora que hemos eliminado las cosas aburridas, dibujemos en un lienzo. La forma en que enseñé esta siguiente sección fue usando codepen.io. Lo que sugiero es que si desea seguir adelante, vaya a codepen.io, cree una cuenta, luego cree una nueva pluma y debería estar listo. Asegúrese de activar su cuenta si desea guardar su trabajo.

Dibujemos sobre lienzo

Primero, necesitamos crear el lienzo para poder dibujar sobre él. En su HTML, cree una etiqueta de lienzo.

¡Ahora es JavaScript de aquí en adelante!

Necesitamos tomar nuestro elemento de lienzo del DOM y declararlo como una variable. Esto nos permitirá establecer su contexto. Todavía no somos tan hábiles con '3d', por lo que nos quedaremos con un contexto '2d'.

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

También podemos darle al lienzo sus propiedades de ancho y alto .

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

Quiero señalar aquí que el lienzo actúa exactamente como un objeto. Tiene propiedades y métodos como vimos en nuestra función de constructor arriba. Ligeramente diferente en cómo lo declaramos, pero funcionalmente funciona de manera muy similar. Entonces ves que tiene propiedades de alto y ancho , así como un método getContext .

Ahora pongamos todo eso en una función para que pueda familiarizarse un poco con la programación funcional.

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

No aparecerá nada en la pantalla todavía, usaremos el método fillRect para ayudarnos con eso.

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

Si no lo ha adivinado, el método fillRect toma cuatro parámetros: coordenada x, coordenada y, ancho y alto. En el lienzo, el eje x comienza en 0 a la izquierda y hasta el infinito va hacia la derecha. El eje y comienza en 0 desde arriba y hasta el infinito bajando. Entonces, cuando comenzamos en (10, 10) estamos colocando el cursor imaginario en el punto (x = 10, y = 10) y vamos 100 a la derecha y 200 hacia abajo desde ese punto.

Como habrás notado, todavía no se ha agregado a la página. Agregue una función simple window.onload y haga que sea igual a nuestra función de dibujo finalizada.

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;

Quizás se pregunte por qué se ejecutó la función de dibujo a pesar de que no la ejecutamos con parens (). Eso es porque window.onload es una función. Eso es lo mismo que decir:

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.