Capítulo 7 La API del CANVAS
El Canvas de HTML5 es una de las características más populares de esta tecnología, ya que nos permitirá dibujar, importar imágenes y videos, desplegar texto y hacer animaciones. Afortunadamente esta tecnología es la más aceptada en los cinco navegadores más populares para computadora, y prácticamente se acepta en todos los navegadores para dispositivos móviles. En la página de http://www.caniuse.com podemos confirmar este punto.
Para crear el Canvas necesitamos primero hacer una página básica de HTML5 como se muestra a continuación:
Ahora, dentro de la etiqueta <body>, escribiremos la etiqueta <canvas> y su respectiva etiqueta de cierre </canvas>. Como atributo de estas etiquetas debemos de definir su ancho y su largo. Dentro de ambas etiquetas podemos escribir una sentencia que se mostrará en caso de que el navegador no soporte HTML5. También definimos un identificador y colocamos una etiqueta <h1> para simplemente tener título en la página. Grabe el archivo y pruébelo en algún navegador. En su monitor sólo deberá aparecer la leyenda de Conceptos básicos de canvas, ya que el canvas, por omisión, es transparente. Para poder darle color al canvas, si así lo desea, debemos hacerlo por medio de los estilos en cascada. De hecho el canvas es una etiqueta con modelo de caja, es decir, tiene márgenes, bordes y todo lo que tenemos en las demás etiquetas de tipo box model. Escriba en el mismo archivo los estilos en cascada dentro de la etiqueta <head>.
7.1 Detectar el canvas con JavaScript Debemos de esperar a que todos los elementos del HTML hayan sido creados antes de ser utilizados, para que podamos utilizar el código de JavaScript. Tenemos dos opciones: colocar la etiqueta <script> en la parte inferior de la página HTML, o utilizar un detector de eventos que nos indique cuando los elementos visuales han sido creados. En este libro optaremos por esta segunda alternativa. Para llamarlo con el evento onload podemos hacerlo desde la etiqueta body o desde la etiqueta <script>. Aquí lo realizaremos desde la etiqueta <script>, pero podrá ver algunos listados en libros o páginas de Internet que lo hacen de manera diferente. No se preocupe, es exactamente igual. De hecho, la forma correcta de trabajar con JavaScript y también con los estilos en cascada, es tenerlos en archivos independientes y llamarlos desde el HTML.
7.2 Dibujar rectángulos en el canvas Una de las características fundamentales del canvas es que podemos dibujar en él. Pero antes de iniciar a dibujar en el canvas, borremos la sentencia alert del archivo de la sección anterior y guárdelo como canvasBase.html, el cual utilizaremos para no tener que reescribir el mismo código. Abra el archivo canvasBase.html y guárdelo como canvasBase02.html. Con la propiedad lineWidth definimos el ancho de la línea en pixeles. En la parte inferior utilizamos la sentencia fillRect para dibujar un rectángulo del color que hayamos definido en fillStyle. La sentencia stockeRect dibuja el contorno de un rectángulo, tomando el ancho de la sentencia lineWidth y el color de strokeStyle. Los parámetros de ambas funciones son: los dos primeros son las coordenadas en relación al canvas de donde se va a iniciar el rectángulo, el resto indica el ancho y largo correspondiente. En las siguientes líneas de nuestro código cambiamos el color del relleno con una función rgba(), propia del CSS3, que nos permite manejar la transparencia y volvemos a dibujar otro rectángulo (en este caso son cuadrados).
Dibujo de rectángulos
7.3 Dibujar líneas en el canvas Además de dibujar rectángulos, podemos hacer líneas. Si usted llegó a utilizar el API (Application Programming Interface) de dibujo de Flash, encontrará muchas similitudes. Abra el archivo canvasBase.html y guárdelo como canvasBasico03.html. Dentro de la verificación del contexto, escriba las siguientes instrucciones:
Si deseamos una terminación redonda, podemos escribir el siguiente código en la parte inferior del listado anterior: Con square la terminación será cuadrada y con butt la eliminamos.
7.4 Las esquinas entre líneas Las terminaciones de las esquinas que dibujamos en el canvas también se pueden modificar. Abra el archivo canvasBase.html y guárdelo como canvasBasico04.html. Para modificar las esquinas utilizamos la propiedad lineJoin con tres posibles valores: bevel: será como si tuviera una superficie biselada, es decir, chata. round: hará una esquina redonda. mitter: Será una esquina en pico. Escriba el código anterior y pruébelo en algún navegador quitando y poniendo el comentario en las diversas sentencias y observe los resultados.
7.5 El manejo de estados en el canvas Podemos almacenar el estado anterior con el método save y restore. Aunque nos parezca un poco trivial, cuando empecemos a utilizar un poco más de programación para los juegos y otros desarrollos, veremos su enorme utilidad. Abra el archivo canvasBase.html y guárdelo como canvasBasico05.html. Como se puede observar, podemos guardar el color del relleno y del contorno. También se almacenan datos de las propiedades translate, rotate y .scale. Guarde el archivo y ejecútelo en un navegador. Observará que se alternan los cuadros de colores. Ahora quite la opción de restore ( o coméntela) y verá que los dos últimos cuadros son iguales.
7.6 Creación de path en canvas Los paths o trazos en canvas no son otra cosa que varias líneas continuas que forman un “camino”. Hay ciertas propiedades y métodos que son muy importantes dentro de los paths. Abra el archivo canvasBase.html y guárdelo como canvasBasico06.html. Primero definimos el ancho de la línea, así como los colores de relleno y de contorno. Iniciamos el path con el método beginPath, movemos la posición y dibujamos tres líneas. Ejecutamos el dibujo con la sentencia stroke(). Tendremos tres líneas rojas que no cierran la figura. El siguiente bloque de instrucciones es semejante, pero la diferencia es que estamos utilizando el método closePath(), con lo que el último trazo se cierra con el primero, terminando así la figura.
El método fill(), archivo canvasBaico06.html En este listado, aparte de utilizar el método stroke y closePath, aplicamos el método fill, con lo cual dibujamos el interior de la figura. Guarde su archivo y visualícelo en un navegador. Verá las tres figuras y sus diferentes resultados.
7.7 Dibujar arcos con canvas La forma de hacer círculos en canvas es por medio de los arcos. Este método tiene seis parámetros los dos primeros son el punto central del círculo, el siguiente es el radio del arco, después es el ángulo inicial y el que sigue es el ángulo final. El sexto es la dirección del dibujo. Por omisión es falso, es decir que es en sentido contrario de las manecillas del reloj. Antes de empezar, abra el archivo canvasBase.html y guárdelo como canvasBasico07.html. El ángulo inicial se encuentra en el eje de la “equis”, de lado derecho. Guarde y ejecute su archivo y podrá observar los tres arcos. Para hacer un círculo iniciamos en cero y terminamos en 2*PI, que por omisión son los 360 grados, no importa la dirección.
7.8 Las curvas Bézier Por medio del API de dibujo del canvas podemos usar las curvas Bézier, que fueron nombradas así en honor del ingeniero francés Pierre Étienne Bézier, quien las inventó para el uso del primer sistema CAD de la historia. Esas curvas constan de dos puntos ancla, que son el primero y el último, y dos puntos llamados tangentes o puntos de control o manecillas, los cuales son invisibles en el dibujo. Antes de empezar con las curvas Bézier, abra el archivo canvasBase.html y guárdelo como canvasBasico08.html. El primer punto ancla se declara con la sentencia move(). En el método bezier() se escriben los siguientes tres puntos: los dos puntos de control y el segundo punto ancla. Los siguientes cuadritos sólo sirven para ilustrar los puntos de la curva y no son en realidad necesarios. Guarde su archivo y visualícelo en un navegador. Verá la curva y cada uno de los cuadritos que representan un punto de la misma.
7.9 Los gradientes lineales en el canvas Los gradientes, tanto lineales como radiales, se pueden utilizar en líneas, rectángulos, textos y arcos. En realidad constan de tres pasos: crear la dirección del gradiente, añadir los colores y aplicarlas a los objetos por medio del fillStyle o strokeStyle. Antes de empezar, abra el archivo canvasBase.html y guárdelo como canvasBasico09.html.
Pasos para conseguir un gradiente y aplicarlo a un rectángulo 1. Definimos la dirección del gradiente. En este caso imagine que estamos definiendo dos puntos en el método createGradient(). La dirección de esa línea definirá la dirección del gradiente. 2. Definimos los diferentes colores con el método addColorStop(). El primer parámetro es la ubicación del color, donde cero es el inicio de la línea y 1 es el final. Los colores se mostrarán en forma perpendicular a la misma. 3. Aplica el objeto gradiente al fillStyle o strokeStyle. 4. Se ejecuta la figura o texto con el gradiente. Guarde su archivo y visualícelo en un navegador. Verá un rectángulo con gradientes.
7.10 Diferentes direcciones del gradiente en el canvas Guarde el archivo de la sección anterior como canvasBasico10.html. Para hacer otras variaciones de los gradientes lineales, simplemente tiene que modificar la dirección de la línea, como se muestra a continuación. También podemos tener gradientes diagonales, si es que definimos en el método createGradient() dos puntos diagonales. Guarde su archivo y visualícelo en un navegador. Verá los gradientes lineales dibujados en los diferentes cuadros del canvas. 7.11 Gradientes radiales Se pueden hacer gradientes radiales en canvas de HTML5 dibujando un par de círculos y desplazando los mismos. También podemos aplicarlos a textos, arcos, líneas, etc. Utilizaremos el método createRadialGradient() para crear nuestro gradiente radial y luego seguimos los pasos que habíamos definido en la sección de los gradientes lineales.
7.12 Patrones en dibujo En canvas de HTML5 podemos cargar patrones para visualizarlos en un rectángulo, círculo, línea y texto. Para ello, debemos de cargar una imagen de tipo jpg, png o gif en un objeto de tipo imagen y después los podemos repetir en forma vertical, horizontal o ambas, similar ac omo lo hacemos con los estilos en cascada. Antes de empezar, abra el archivo canvasBase.html y guárdelo como canvasBasico12.html.
7.13 Manejo de texto en canvas El canvas de HTML5 también permite manejar texto, incluso podemos usar fuentes externas Web. Antes de iniciar, abra el archivo canvasBase.html y guárdelo como canvasBasico13.html. Por medio de las propiedades shadow, podemos crear sombras en los textos y otras figuras. Con la función fillText mandamos el texto y con strokeText los contornos del mismo. Guarde su archivo y visualícelo en un navegador. Podrá observar el texto con su contorno y sombra. 7.14 El manejo de eventos del ratón El último punto básico que vamos a revisar son los eventos. Vamos a tener toda la ayuda de JavaScript. Antes de iniciar, abra el archivo canvasBase.html y guárdelo como canvasBasico14.html. Grabe el archivo y ejecútelo. Pulse sobre el canvas y aparecerán los datos del evento. Ahora cambie el evento por onmouseup y el evento se disparará cuando pulse el canvas y levante el botón del ratón.