Una Introducción para Trabajar con Canvas

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Final product image — What You'll Be Creating

Hoy, aprenderás una tecnología web que es conocida como Canvas y como está relacionada con el Modelo de Objetos del Documento, comúnmente referido como el DOM. Ésta tecnología es tremendamente poderosa pues permite a desarrolladores web accesar y modificar elementos HTML a través del uso de JavaScript.

Ahora puedes preguntarte por qué hasta necesitamos molestarnos con JavaScript. Para ponerlo simple, HTML y JavaScript son comunes e interdependientes. Algunos componentes HTML, tales como el elemento canvas, no son nada sin el uso de JavaScript. Después de todo, ¿que tan bueno es un canvas (lienzo) si no podemos dibujar en él?

Para captar el concepto, pensé que podríamos trabajar en un proyecto de ejemplo juntos en el que intentaremos dibujar una simple cara sonriente. Así que manos a la obra.

Comenzar

Primero creamos un nuevo directorio que contenga los archivos de tu proyecto, y luego continúa y abre tu favorito editor de texto o herramienta de desarrollo web. Una vez que lo hemos hecho, deberías crear un archivo vacío index.html y un archivo vacío script.js, que editaremos mientras avanzamos.

Project directory including index html and script js files

Después, nos moveremos para modificar nuestro index.html, que no debería llevar mucho, pues lo importante de nuestro proyecto será escrito en JavaScript. Todo lo que necesitamos hacer en nuestro HTML es crear un elemento canvas y apuntar a script.js. Es muy sencillo.

<!DOCTYPE html><body>

   <canvas id='canvas' width='640' height='480'></canvas>
   <script type='text/javascript' src='script.js'></script>

</body></html>

Así para explicar, utilicé un conjunto de etiquetas para <html> y <body>, y podemos agregar mas elementos a nuestro documento vía el body. Aprovechando ésta oportunidad, hago exactamente eso con un elemento canvas de 640 por 480 con el atributo id='canvas'.

Éste atributo simplemente enlaza un string con un elemento para fines de identificación, y estaremos usándolo después para localizar nuestro elemento canvas en nuestro archivo JavaScript. Luego apuntaré a nuestro archivo JavaScript usando la etiqueta <script>, en la que especifiqué JavaScript como el tipo de lenguaje y script.js como la ruta de nuestro archivo deseado.

Manipular el DOM

Como lo implica el nombre Modelo de Objetos del Documento, necesitaremos usar una interfaz para el documento HTML a través del uso de otro lenguaje, en éste caso, JavaScript. Para ésto, necesitaremos un informe sobre el objeto documento integrado. Éste objeto directamente corresponde a nuestras etiquetas <html>, y similarmente, es la base de todo nuestro proyecto, como podemos usarlo para obtener elementos y generar cambios.

1	var canvas = document.getElementById('canvas');

¿Recuerdas como definimos un elemento canvas con el id='canvas'? Ahora vamos a tomarlo del documento HTML a través del uso del método document.getElementById, en el que simplemente pasamos el string que coincida con el id del elemento deseado. Ahora que lo hemos tomado, podemos comenzar a usarlo para dibujar.

Para dibujar en el lienzo, debemos manipular su contexto. Sorprendentemente, un lienzo no contiene ningún método o atributos para dibujar, pero su objeto contexto tiene todos los métodos que necesitamos. Un contexto es definido así:

1	var context = canvas.getContext('2d');

Cada canvas tiene diferentes contextos, y para el propósito de nuestro programa, solo necesitaremos uno que es bidimensional. Éste contexto que hicimos tendrá todos los métodos de dibujo que necesitaremos para crear nuestra cara.

Antes que comencemos, debo informarte que el contexto guarda dos colores como atributos, uno para el trazo y otro para el relleno. Para nuestra cara sonriente, necesitaremos establecer el relleno en amarillo y el trazo en negro.

1	context.fillStyle = 'yellow';
2	context.strokeStyle = 'black';

Después de establecer el contexto a los colores deseados, debemos dibujar un círculo para la cara. Desafortunadamente, el contexto no tiene un método predefinido para círculos, así que necesitaremos usar lo que se conoce como ruta. Una ruta es simplemente una serie de líneas y curvas unidas, y ésta ruta es entonces cerrada cuando el dibujo ha sido completado.

context.beginPath();
context.arc(320, 240, 200, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();

Para explicarlo, le ordenamos al contexto que comience una nueva ruta. Posteriormente, creamos un arco en el punto (320, 240) con un radio de 200 pixeles. Los últimos dos argumentos especifican el ángulo inicial y terminal para construir el arco. Asi que pasamos 0 y 2 * Math.PI radianes para crear un círculo completo. Finalmente, ordenamos al contexto rellenar y trazar la ruta de acuerdo a los colores que ya definimos.

Aunque cerrar la ruta no es un requisito para la función del script, necesitaremos finalizar la ruta para que podamos comenzar otras para los ojos y la boca de nuestra cara sonriente. Los ojos se hacen exactamente de la misma manera, cada uno con un radio más pequeño y posición diferente. Pero primero debemos recordar establecer el color de relleno en blanco.

context.fillStyle = 'white';

context.beginPath();
context.arc(270, 175, 30, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(370, 175, 30, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();

Y eso es todo lo que se hace con los ojos. Ahora la boca es muy similar, pero ésta vez no rellenaremos el arco, y nuestro ángulo será configurado como un semicírculo. Para hacer ésto, necesitaremos establecer el ángulo de inicio en cero y el ángulo final en -1 * Math.PI. Y recuerda, no olvides establecer el color del trazo en rojo.

context.fillStyle = 'red';

context.beginPath();
context.arc(320, 240, 150, 0, -1 * Math.PI);
context.fill()
context.stroke();
context.closePath();

Felicitaciones

Buen trabajo. Lo has logrado hasta el final del tutorial y has creado una fabulosa cara sonriente mientras aprendes mucho más sobre Canvas, HTML, JavaScript, y el Modelo de Objetos del Documento. Si tienes alguna pregunta, con toda confianza deja un comentario. Da click aquí para ver el programa en acción.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!