Leccin 5: Trabajar con el CanvasObjetivos:El Canvas es una API de dibujo en dos dimensiones incluida en la especificacin HTML5. La inclusin de una API de dibujo nativa permite a los desarrolladores generar imgenes dinmicamente dentro de una pgina web, por lo general a partir de datos obtenidos desde alguna fuente o a partir de la interaccin con el usuario. A diferencia de los formatos conocidos de imgenes como JPG o PNG, los dibujos que se crean con Canvas se pueden modificar en tiempo real.Para empezarVas a trabajar con algunos archivos que se encuentran en la carpetaHTML5_05lessonsa lo largo de esta leccin.Comprueba que has descargadoy copiado la carpeta de prcticas de HTML5 en tu ordenador.En esta leccin vas a aprender los conceptos bsicos de la API Canvas, que incluyen el dibujo de figuras, trazos, textos y el uso de colores y gradientes. Despus vamos a continuar con conceptos ms avanzados de dibujo de imgenes, sombras, el empleo de transformaciones y la creacin de animaciones. Puedes utilizar el elemento Canvas de HTML5 para definir la superficie de dibujo, pero tendremos que programar en JavaScript las instrucciones de dibujo y las lneas, formas y colores resultantes. Aunque los conocimientos necesarios de JavaScript son mnimos, si nunca has programado en este lenguaje conviene que antes leas con atencin esta introduccin breve al lenguaje.Conceptos bsicos de JavaScriptJavaScript es un lenguaje de scripting con su propia estructura y sintaxis. Queda fuera del alcance de esta leccin explicar por completo JavaScript y cmo se utiliza, pero s vamos a ver aqu algunos conceptos bsicos, ya que si no has programado antes en este lenguaje, necesitars tener unos conocimientos bsicos sobre la forma en que JavaScript interacta con el cdigo HTML, y estos conocimientos te servirn como una base que podrs aplicar a lenguajes de scripting ms avanzados, como C# o PHP. En los pasos siguientes vamos a trabajar con un formulario sencillo, para entender algunos de los conceptos fundamentales de JavaScript.1En el editor de textos, en el Men Archivo selecciona Abrir y ve a la carpetaHTML5_05lessons. Selecciona el archivo 05_subscribe.html y pulsa Abrir. Para mantener una copia de seguridad de este archivo, gurdalo con otro nombre.2En el men Archivo, selecciona "Guardar como" y gurdalo con el nombre05_subscribe_work.html. Comprueba que lo has grabado en la carpetaHTML5_05lessons.Repasa durante un momento el cdigo HTML. Vers que est creado totalmente en HTML y que, en consecuencia, carece de toda interactividad o dinamismo. Es una pgina totalmente esttica.3Visualiza la pgina en el navegador y pulsa despus el botn Submit. No ocurre nada salvo el comportamiento por defecto del botn, que es un elemento que no tiene en esta pgina web ninguna funcin concreta.

HTML no puede comprobar si un campo de formulario tiene datos. Necesitas JavaScript para eso.Necesitamos utilizar JavaScript para que el botn sea interactivo, ya que HTML nos permite hacer ciertas cosas, como modificar el texto que aparece en el botn, pero no aporta mtodos para controlar la interactividad. Vamos a aadir cdigo JavaScript para que al pulsar el botn se abra una ventana en el navegador y nos pida el nombre. Una vez escrito el nombre, al pulsar OK, el cdigo JavaScript mostrar este nombre en pantalla.4Debajo de la etiqueta en la pgina, escribe estas lneas de cdigo:

Tenemos que indicar a HTML que queremos utilizar JavaScript, igual que hemos hecho ya con CSS. Podemos insertar esas instrucciones en cualquier lugar del cdigo HTML, pero las buenas prcticas recomendadas son aadir el cdigo de programacin en la seccin de la cabecera () de la pgina.El atributo type es opcional en HTML5.5Aade entre las etiquetas de el siguiente cdigo (en rojo):

function show_prompt()

Una funcin en JavaScript es un cdigo que se ejecutar como resultado de algn evento en la pgina. En este caso, la funcin tiene un nombre, show_prompt(), y lo nico que har es indicarle al navegador que abra una pequea ventana en pantalla . El evento que dispara esta funcin es la accin del usuario de pulsar el botn Submit.La funcin show_prompt() necesita ms cosas para conseguir lo que queremos.6Aade este cdigo (marcado en rojo) debajo de la funcin:

function show_prompt(){var name=prompt();}

En esta lnea de cdigo hemos declarado unavariabley le hemos asignado unvalor. Esta variable, llamada name, obtiene su valor de la funcin "prompt()". Una lnea de cdigo es la cantidad mnima de informacin que se necesita para hacer que ocurra algo en JavaScript.Para que se ejecute el cdigo JavaScript necesitamos aadir una instruccin al botn HTML que le describir cmo ha de ejecutar el cdigo y qu funcin debe utilizar.7Aade este cdigo (indicado en rojo), al HTML del botn:

La instruccinonclickse conoce comoevento JavaScripty el valor "show_prompt()" es la funcin JavaScript que hemos declarado en el paso 5 dentro de la etiqueta . Ahora hemos cerrado la cadena lgica que, en resumen, viene a decir "cuando el usuario pulse el botnSubmit, llama a la funcinshow_prompt. Cuando se ejecute la funcinshow_prompt, ejecutar otra funcin llamadaprompt".8Guarda el archivo y visualiza la pgina en el navegador. Si la configuracin de seguridad del navegador est preparada para impedir la ejecucin de scripts, debers pulsar en el botn "Permitir el contenido bloqueado". Pulsa el botn Submit y vers aparecer una ventana pidiendo un dato en pantalla (un tipo de ventana especfica, denominada "User Prompt"). Es una demostracin realmente simple de JavaScript en accin. Ahora vamos a aadir algo ms de cdigo para insertar datos en esta ventana emergente, en los pasos siguientes.9Cierra el navegador y en el editor aade el cdigo marcado en rojo a la declaracin de la variable JavaScript (la que hemos insertado en el paso 6):var name=prompt("Please enter your name","Chris P. Bacon");Guarda el archivo y mustralo en el navegador. Prueba a ver qu sucede ahora al pulsar Submit. Los nuevos valores aparecen en la ventana:

La ventana de introduccin de datos ("User Prompt") es una de las demostraciones ms simples JavaScript en accin.Ahora hay que aadir cdigo JavaScript para capturar el valor del texto introducido en esta ventana para poder mostrarlo despus en una pgina HTML nueva.10Cierra el navegador y aade este cdigo indicado en rojo al cdigo JavaScript:

function show_prompt(){var name=prompt("Please enter your name","Chris P. Bacon");if (name!=null && name!=""){document.write("Hello " + name + "! How are you today?");}}

El nuevo cdigo aadido se compone de dos partes: unasentencia IFy unasentencia THEN.La sentencia IF busca un valor en el campo de texto. Si hay algn valor, se ejecuta la instruccindocument.writede la lnea siguiente, y se ve en pantalla el nombre que hemos escrito en la ventana emergente.Los caracteres!=y&&que aparecen en la expresin (name!=null && name!="") se conocen comooperadoresen JavaScript y son piezas bsicas en el diseo lgico de cualquier funcin.La expresindocument.writees una sentencia que le dice al navegador web que escriba un dato en una pgina web. En este caso, se trata de escribir la frase "Hello" seguida de las palabras que hayamos escrito en el campo de texto de la ventana emergente anterior, y terminara con las palabras "How are you today?".11Guarda la pgina y mustrala otra vez en el navegador. Deja el valor por defecto de momento y pulsa OK. Aparece una pgina nueva, como resultado del cdigo que hemos aadido en el paso anterior.

El nombre escrito en el campo de texto se muestra en una pgina nueva.Pulsa el botn Atrs del navegador y pulsa el botn Submit de nuevo, pero esta vez escribe tu nombre en la lnea de texto. Pulsa Aceptar y aparecer este nuevo nombre en la pgina siguiente.Se trata de una funcin JavaScript relativamente sencilla, pero que nos permite saber a grandes rasgos cmo se comunica JavaScript con los elementos HTML de una pgina y ciertos conceptos bsicos de la lgica con la que operan las funciones de JavaScript. En el siguiente ejercicio vamos a practicar con los eventos de JavaScript.

Eventos de JavaScriptEl evento JavaScript con el que hemos practicado en el ejercicio anterior era onclick , el cual forzaba la ejecucin del cdigo al pulsar el botn Submit. Hay muchos otros eventos que podemos utilizar tambin y para saber mejor cmo funcionan, vamos a modificar nuestro ejemplo.1En el cdigo HTML cambia el evento onclick por el evento onmouseover (como se muestra en la parte destacada en rojo):

2Guarda el archivo y brelo ahora en el navegador. Pasa el cursor sobre el botn, pero sin pulsar. La ventana emergente aparece. El eventoonmouseoverlanza el cdigo JavaScript asociado en cuanto el cursor pasa por encima del rea del botn.En este momento el evento est asociado al botn, pero podemos mover el evento y en vez de reaccionar al botn, que lo haga asociado a toda la pgina.3Selecciona el eventoonmouseovery su valor, y pulsa Ctrl + X para cortar el cdigo. Busca la etiqueta de abertura de y pulsa Ctrl + V para pegar el cdigo, como se muestra aqu:

El eventoonmouseoveraplicado a la pgina entera va a funcionar, pero es las buenas prcticas recomiendan el uso del evento "onload", que lanza el cdigo JavaScript en el momento en que se abre la pgina:

4Una vez hemos cambiado el evento a onload, guarda la pgina y brela en el navegador. En cuanto la pgina se abre, se nos muestra la ventana emergente pidiendo el nombre. Podramos introducir el texto aqu, pero tal y como est estructurado el evento en este momento, el resultado sera que el texto escrito se mostrara en la misma pgina, as que pulsa Cancelar.Con este ejercicio has aprendido que JavaScript te deja elegir el momento y la forma de llamar al cdigo. En ambos casos la interaccin del usuario lanza la ejecucin de ese cdigo, pero el eventoonloadnos ofrece pocas opciones para elegir el momento, mientras que el eventoonclick(asociado al botn), nos da ms control.

El Modelo de Objeto de Documento (DOM)JavaScript tiene acceso a los objetos dentro del navegador. As es como aparece la ventana emergente en el ejercicio anterior. Para este acceso se utiliza el denominado DOM (Document Object Model) o Modelo de Objeto de Documento, que es una convencin para acceder a los datos dentro de las pginas HTML. Este modelo describe cmo se relacionan todos los elementos de una pgina HTML por ejemplo textos, formularios o imgenes- con la estructura de mayor nivel, que es la que se denomina "documento".JavaScript tiene acceso al documento y todos los elementos relacionados dentro de la pgina Web de un modo que no puede hacerse con HTML. Entre otras cosas, gracias a este acceso, con JavaScript se puede: Validar campos de formulario Detectar qu navegador estamos utilizando Responder a los eventos de usuario (a su "actividad") Guardar y devolver informacin desde/hacia el ordenador del usuarioRecuerda el primer ejercicio y la seccin de cdigo que aadiste, que tena una etiquetadocument.write (the seventh line from the top).

function show_prompt(){var name=prompt("Please enter your name","Chris P. Bacon");if (name!=null && name!=""){document.write("Hello " + name + "! How are you today?");}}

A esta seccin del cdigo en rojo se la denomina unafunciny el comportamiento que ha demostrado la pgina es uno de los ejemplos ms simples que se pueden hacer en JavaScript, puesto que tenemos muy pocos objetos en el documento. La mayora de documentos HTML tienen dentro mltiples objetos y podemos pasar un valor de texto a otra zona de la pgina, o enviar datos desde un formulario. Ahora que tienes una idea bsica de JavaScript y su funcionamiento, el trabajo con el elemento Canvas ser ms sencillo.El elemento CanvasEl elementocanvases algo distinto de los dems elementos de HTML5. Es ms complejo en el sentido de que necesita de JavaScript para funcionar. El primer paso que daremos ser aadir (o definir) un elementocanvasen nuestra pgina HTML. Despus tenemos que guardar una referencia al contexto de dibujo para ese elemento en forma de variable de JavaScript. Ms tarde utilizaremos el propio contexto para escribir nuestras instrucciones de dibujo.1Abre el archivo05_canvastemplate.htmldentro de la carpetaHTML5_05lessonsy busca la plantilla que vamos a utilizar en los siguientes ejercicios (y que podrs modificar en futuros proyectos). Esta plantilla define un elemento HTML , un cuadrado de 300 pixels de lado, que delimita la superficie de dibujo. Cuando se abre el cuerpo de la pgina, se llama a la funcin JavaScript setup(). Esta funcin encuentra el elementocanvaspor su nombre y declara una variable con la referencia al contexto de dibujo delcanvas. Una vez que tenemos disponible esa referencia, podemos dibujar libremente sobre esa superficie. El cdigo HTML de la plantilla del canvas es as:

El cdigo JavaScript tiene este aspecto:

function setup() {var canvas = document.getElementById('lessonCanvas');if (canvas.getContext) {var ctx = canvas.getContext('2d');}}

No vas a modificar este archivo, sino que cuando ests preparado para operar sobre el canvas por ti mismo, podrs utilizarlo como punto de partida.2En el men Archivo del editor, cierra el archivo sin hacer cambios.

Ventajas del elemento CanvasSegn vayamos avanzando por los siguientes ejercicios seguramente pensars que la cantidad de scripting que se necesita es mayor de la esperada. El elementocanvasnos permite crear grficos que, de no disponer de l, tendramos que generar con otros programas como Photoshop, Illustrator, o si se trata de animaciones, con Flash o Silverlight. La diferencia es que en vez de utilizar las herramientas de dibujo de estos programas, vamos a poder crear formas, gradientes, textos y otros elementos visuales con nuestro propio cdigo.El objetivo de esta leccin consiste en explicar los conceptos fundamentales del manejo del elemento canvas. Sin duda, en el futuro tendremos aplicaciones que nos permitirn crear objetos y animaciones para los canvas sin necesidad de programarlos a mano. De hecho veremos algunos de estos desarrollos al final de la leccin. De momento vamos a crear estos objetos desde cero, que es la mejor forma de saber cmo se hacen las cosas con el canvas.El elemento canvas ha tenido un soporte razonablemente bueno entre los navegadores a lo largo del tiempo y podemos suponer que acabar sustituyendo a la amplia variedad de soluciones que conocemos con el nombre de "contenidos multimedia avanzados" y tambin se utilizar para juegos, animaciones, diagramas, grficos, visualizacin de datos y para crear interfaces vectoriales de usuario, entre otros muchos usos posibles.Una de las grandes ventajas del Canvas en todos estos casos de uso es que no necesita que instalemos un complemento en el navegador. Hay ms casos de uso del canvas: los iconos de la interfaz de usuario son un ejemplo del tipo de grficos que, en teora, podemos crear con elementos canvas. Las imgenes creadas con este elemento pueden guardarse en el disco en forma de archivos PNG, as que podemos imaginar una aplicacin web que nos permitir exportar imgenes. Adems, utilizando una funcionalidad del Canvas llamada "data uri"podemos embeber imgenes creadas con el Canvas directamente dentro de CSS.Como sucede con la mayor parte de las funcionalidades de HTML5, queda a criterio de los diseadores y desarrolladores el empezar ya a utilizar este elemento. En los ejercicios siguientes puedes empezar a hacerlo por ti mismo. Al finalizar la leccin habrs creado un grfico de barras empleando el canvas.Trazos de dibujo ("paths")Los trazos y las formas bsicas son los componentes bsicos de la creacin de dibujos en el elemento canvas. Una vez te familiarices con las funciones ms importantes, podrs crear elementos grficos ms complicados, como diagramas basados en datos, figuras animadas para tus juegos y otros diseos de gran utilidad e inters. Las primeras funciones que veremos en este apartado tambin nos van a servir para tener un conocimiento general de cmo funciona el elemento canvas.Dibujo de rectngulosEl rectngulo es el trazo ms sencillo que podemos dibujar. La funcin fillRect(x,y,width,height)que podemos utilizar dentro del objeto context , genera una figura rectangular en la posicin y con el tamao indicados por los parmetros, y con un relleno basado en el valor que tenga la variable fillStyle en ese momento. Una funcin estrechamente vinculada con sta es strokeRect, que genera la misma figura pero en lugar de rellenarla, dibuja el contorno basndose en el estilo definido en ese momento para la variable strokeStyle. La funcin clearRect emplea los mismos parmetros pero elimina ("limpia") todos los pixels del canvas que quedan dentro del rea de un rectngulo definido.1Abre el archivo05_drawingrectangles.htmly guarda en la misma carpeta una copia con el nombre 05_drawingrectangles_work.html. En el cdigo vers un elemento Canvas ya definido y una funcin JavaScript llamada setup que se ejecuta al abrir la pgina. En la funcin setup se guarda una referencia al contexto 2D del Canvas en una variable que es la que vamos a utilizar para dibujar.2En la sentenciaif,despus de la declaracin de la variablectx,aade este cdigo para dibujar un rectngulo que ocupe todo el canvas:function setup() {var canvas = document.getElementById('lessonCanvas');if (canvas.getContext) {var ctx = canvas.getContext('2d');ctx.strokeRect(0, 0, 300, 300);}}Como puedes ver, las coordenadas X e Y tienen un valor cero, es decir, el rectngulo se empieza a dibujar a partir de la esquina superior izquierda del canvas. Puesto que su anchura y altura valen 300 pixels, esto quiere decir que el rectngulo ocupa todo el espacio del canvas.3Debajo de la lnea que acabas de escribir, aade estas otras dos lneas de cdigo que cambian el color del trazo, que ahora es negro, a rojo, y una segunda que dibuja un recuadro rojo ms pequeo:ctx.strokeStyle = 'rgb(255, 0, 0)';ctx.strokeRect(0.5, 0.5, 100, 100);4Guarda el archivodrawingrectangle_work.htmly brelo en el navegador. Podrs ver algo similar a esta figura. Igual que con otras muchas funcionalidades de HTML5, si no vemos nada en pantalla lo que tenemos que hacer es confirmar que el navegador soporta el elemento HTML5 (el canvas en este caso).

Rectngulos con borde negro (el mayor, coincidiendo con la superficie del canvas) y rojo (interior).Como ves, el elemento Canvas tiene un margen definido en CSS que se aade solo a efectos de ayuda visual. Esto nos muestra que podemos utilizar CSS para modificar el estilo del elemento Canvas, igual que se hace con otros elementos HTML.5Vuelve al editor de textos y debajo de las lneas que acabas de escribir, aade la siguiente lnea para dibujar un rectngulo con relleno:ctx.fillRect(20, 20, 100, 100);6Aade otras dos lneas de cdigo para cambiar el color del relleno, que en este momento es negro, a verde, y dibuja otro segundo rectngulo con este nuevo color:ctx.fillStyle = 'rgb(0, 255, 0)';ctx.fillRect(50, 50, 100, 100);7Guarda el archivo y vuelve a mostrarlo en el navegador. SI la pgina estaba ya abierta, simplemente actualiza el contenido (pulsando F5) o vuelve a cargar el archivo. Ahora lo que deberamos ver es lo que aparece en esta figura:

Rectngulos con borde en rojo y negro, y otros rectngulos con relleno negro y verde creados con HTML5.La funcin fillRect sirve para crear un rectngulo slido (relleno), en vez de un recuadro.8Mantn abierta la pgina en el navegador y vuelve al editor. Debajo de las lneas del paso seis, aade este cdigo para borrar los pixels de una zona del canvas:ctx.clearRect(80, 80, 30, 30);9Guarda el documento, vuelve al navegador y actualiza la pgina. Ahora vers un dibujo parecido al de la figura siguiente. La funcin clearRect convierte en transparentes todos los pixels que quedan dentro del rea delimitada por el rectngulo, eliminando en parte los cambios de color que hemos hecho antes con strokeRect y fillRect.

Recuadros negro y rojo con rectngulos en negro y verde, y dentro de ste, un agujero transparente.

Dibujo de lneas y crculosLas funciones de dibujo de rectngulos del apartado anterior son, en realidad, una de funciones an ms bsicas combinadas de tal forma que su uso se hace ms sencillo. Supongamos que nos interesa crear el mismo rectngulo utilizando funciones ms bsicas. Veamos otra vez el cdigo de la funcin generadora:ctx.strokeRect(0, 0, 300, 300);El mismo rectngulo se puede generar siguiendo una secuencia de funciones ms bsicas:ctx.moveTo(0, 0);ctx.lineTo(300, 0);ctx.lineTo(300, 300);ctx.lineTo(0, 300);ctx.lineTo(0, 0);ctx.stroke();Esta secuencia genera un trazo compuesto o lnea poligonal, que comienza en el punto definido por las coordenadas de moveTo(x, y). Las sucesivas funciones lineTo(x, y)van aadiendo puntos de inflexin al trazo, que se unirn posteriormente con lneas rectas. Finalmente, la funcin stroke es la que dibuja en el canvas las rectas que unen los puntos por orden, pero sin rellenar el espacio interior. Parece ms razonable emplear la funcin de rectngulo puesto que hace lo mismo con una sola lnea de cdigo, pero conviene conocer cmo se manejan las funciones ms bsicas porque las podemos utilizar para dibujar cualquier forma.1Abre el archivo05_drawinglinesandcircles.htmly guarda una copia en disco, con el nombre 05_drawinglinesandcircles_work.html. Este archivo ya tiene un contexto de dibujo declarado en la funcinsetup. En esta prctica vamos a aadir un rectngulo y una serie de lneas en zig-zag.2Dentro de la funcinsetup, detrs de la lnea var ctx = canvas.getContext('2d');, aade este cdigo:ctx.strokeRect(0, 0, 300, 300);ctx.moveTo(20, 20);ctx.lineTo(100, 100);ctx.lineTo(80, 200);ctx.lineTo(200, 80);ctx.lineTo(200, 200);ctx.lineTo(280, 280);ctx.stroke();3Guarda los cambios y pasa al navegador. Abre la pgina para revisar el resultado, que debe ser parecido a esta figura

Un recuadro negro y una lnea en zig.zag atravesando el canvas.Puedes ver que la funcin lineTo es bastante til a la hora de dibujar lneas o rectngulos. Ahora vamos a cambiar el color de relleno de las lneas en zig-zag y aadiremos un crculo rojo encima del trazo.4Vuelve al editor y aade estas lneas de cdigo debajo de las que has escrito en el paso 2:ctx.fillStyle = 'rgb(255,0,0)';ctx.arc(100, 100, 16, 0, Math.PI * 2, false);ctx.fill();La primera lnea cambia el color de relleno active, que pasa de blanco a rojo. La segunda lnea dibuja un crculo completo con su centro situado en las coordenadas (100, 100) y un radio de 16 pixels. Los ltimos tres parmetros de la funcin arc definen la longitud del arco. Los valores startAngle y endAngle, medidos en radianes, definen los puntos de inicio y final, y el ultimo parmetro, llamado anticlockwise define la direccin en que se dibujar la lnea entre estos el punto de inicio y el de trmino. Por tanto, en este cdigo se define el dibujo de un arco que empieza en la posicin 0 (el punto ms a la derecha del crculo terico) y sigue, avanzando en sentido horario, hasta que alcanza el punto 2 radianes, es decir, una rotacin completa de 360 grados, con lo que cierra el crculo. Finalmente, la funcin fill se encarga de darle color al interior.5Selecciona en el men Archivo Guardar y pasa al navegador para ver el efecto de estos cambios en pantalla. Como ves, el crculo ha quedado aadido al conjunto de lneas del trazo. Puesto que las lneas y el crculo forman parte del mismo trazado, el relleno de color se aplica a toda el rea, no solo al crculo.

Un contorno negro y una figura quebrada rellena en rojo.6Si queremos dibujar trazos independientes tenemos que utilizar la funcin beginPath, que da por concluido el trazo activo y comienza con otro nuevo. Vuelve al editor de textos y entre la funcin fillStyle y arc, inserta las lneas siguientes:ctx.fillStyle = 'rgb(255,0,0)';ctx.beginPath();ctx.arc(100, 100, 16, 0, Math.PI * 2, false);ctx.fill();ctx.stroke();Esta segunda lnea, ctx.stroke();, sirve para aadirle un borde al crculo.7Guarda el archivo y pasa al navegador para visualizar la pgina. El dibujo debe aparecer ahora as:

Un recuadro negro, lnea en zig-zag y un crculo rojo.8Una vez creado el crculo, ahora vamos a aadir otro objeto, en este caso un semicrculo. Escribe estas lneas debajo de las anteriores:ctx.beginPath();ctx.arc(170, 170, 16, 0, Math.PI, true);ctx.fill();Con este cdigo iniciamos un nuevo trazo, para dibujar un arco independiente del crculo anterior. Los valores 170,170 son las coordenadas del centro. El valor 16 es el radio, el valor cero es el punto de inicio (startAngle)y el valor de endAngle lo dejamos en , con lo que solamente dibujar un semicrculo -180 grados- empezando desde el punto cero. El valor "true" para el parmetro anticlockwise hace que el semicrculo se desarrolle hacia arriba.9Guarda el archivo y visualiza la pgina en el navegador. Ahora debe verse esta imagen:

Un recuadro negro, lnea en zigzag, crculo rojo y semicrculo rojo.Si dejamos el valor de anticlockwise como "false", el arco se trazara en sentido horario, es decir un semicrculo curvado hacia abajo.

Dibujar figuras con curvasEl elemento canvas nos proporciona dos funciones de dibujo con las que podemos trazar curvas: quadraticCurveTo(cpx, cpy, x, y) y bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y). Ambas funciones utilizan puntos de control para definir la curva del trazo cuando dibuja desde un punto al siguiente.1En la carpetaHTML5_05lessons, abre el archivo05_drawingcurves.htmly guarda una copia en la misma carpeta, con el nombre05_drawingcurves_work.html. El cdigo es el mismo que el del ejercicio inicial donde se defina un elemento canvas y se guardaba una referencia al contexto 2D en una variable para su uso posterior. En este ejercicio vamos a dibujar algunas formas para crear una composicin semejante a una flor.2En la sentenciaif, despus de la lnea donde se declara la variable ctx, aade este cdigo para dibujar un rectngulo que encuadra el canvas.ctx.strokeRect(0, 0, 300, 300);Es el mismo rectngulo de encuadre que vimos en la seccin anterior, que nos sirve de marco de referencia visual para saber dnde est el canvas dentro de nuestra pgina.3Aade las lneas siguientes debajo de la lnea del paso anterior, para dibujar el tallo de la flor:ctx.fillStyle = 'rgb(0,173,104)';ctx.moveTo(145, 150);ctx.quadraticCurveTo(120, 200, 170, 280);ctx.lineTo(190, 280);ctx.quadraticCurveTo(125, 190, 155, 150);ctx.fill();La primera lnea de cdigo cambia el relleno a color verde. Las siguientes lneas definen los puntos iniciales, curvas y lneas de la forma del tallo.4Guarda el archivo. Pasa al navegador y muestra la pgina HTML. Debers ver esta figura:

La forma de un tallo de flor verde.Ahora vamos a crear un ptalo de la flor utilizando la funcin bezierCurveTo que utiliza dos puntos de control, a diferencia del nico punto de control que necesita la funcin quadraticCurveTo del paso anterior. Adems tenemos que dibujar una serie de guas utilizando los mismos puntos, para ver mejor cmo opera la funcin bezierCurveTo.Puesto que vamos a utilizar una serie de puntos varias veces, lo mejor ser guardar los valores de las coordenadas en variables que podremos reutilizar.5Vuelve al editor y aade este cdigo debajo de las lneas de paso 3.var pt1 = { x: 155, y: 145 };var pt2 = { x: 93, y: 106 };var cp1 = { x: 111, y: 154 };var cp2 = { x: 66, y: 131 };6Este cdigo cambia los colores del trazo y el relleno, y nos dibuja el primer ptalo de la flor:ctx.fillStyle = 'rgb(115,206,226)';ctx.strokeStyle = 'rgb(0,111,174)';ctx.beginPath();ctx.moveTo(pt1.x, pt1.y);ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, pt2.x, pt2.y); ctx.bezierCurveTo(89, 65, 159, 118, 155, 145);ctx.fill();ctx.stroke();Las dos primeras lneas del cdigo cambian el trazo a azul oscuro y el relleno a azul claro. Las siguientes cuatro lneas generan un trazo nuevo mediante la funcin bezierCurveTo para conseguir curvas suaves. Finalmente, rellena el trazo y dibuja el borde.7Guarda el archivo HTML y mustralo en el navegador para ver los cambios:

La forma de un tallo con un solo ptalo de la flor.8Vuelve al editor de textos y aade las siguientes lneas de cdigo debajo de las que has escrito en el paso anterior. Estas nuevas lneas cambian el color del borde y del relleno y dibujan el centro de la flor que sirve de centro para todo el conjunto:ctx.fillStyle = 'rgb(243,237,99)';ctx.strokeStyle = 'rgb(253,183,58)';ctx.beginPath();ctx.arc(155, 145, 10, 0, Math.PI * 2, false);ctx.fill();ctx.stroke();9Para hacernos una idea de cmo trabaja la funcin bezierCurveTo con los puntos de control para definir una curva, vamos a aadir una gua utilizando los mismos puntos de la primera curva del ptalo de la flor. Creamos las guas aadiendo las siguientes lneas de cdigo debajo de las del paso anterior:ctx.strokeStyle = 'rgb(255,0,0)';ctx.beginPath();ctx.arc(pt1.x, pt1.y, 2, 0, Math.PI * 2, false);ctx.arc(cp1.x, cp1.y, 2, 0, Math.PI * 2, false);ctx.arc(cp2.x, cp2.y, 2, 0, Math.PI * 2, false);ctx.arc(pt2.x, pt2.y, 2, 0, Math.PI * 2, false);ctx.stroke();La primera lnea cambia el trazo a rojo brillante, que veremos por fuera del dibujo del ptalo. Las seis lneas siguientes generan una lnea poligonal con circulitos pequeos en cada punto utilizado por la primera curva de Bezier.10Guarda el archivo HTML y pasa al navegador para ver cmo queda el diseo tras estos cambios.

La flor con un solo ptalo y las lneas gua de desarrollo de la curva de Bezier.

Ms sobre los puntos de control

Una vez terminada la seccin de Dibujo de Curvas, y para profundizar ms en la forma en que la funcin bezierCurveTo utiliza los puntos de control, modifica los valores de punto guardados en el paso 5. Si cambias los valores, vers que las guas siguen representando en pantalla los puntos utilizados y la curva se desarrolla hacia esos puntos de control.Como ejemplo, cambia la coordenada X de la variable cp2 de 66 a 4. La curva de la parte de abajo del ptalo se dibuja ahora hacia el lado ms a la izquierda del canvas, mientras que el segundo punto sigue siendo el mismo.

Uso de textos dentro del CanvasAdems de lneas y formas, en un canvas podemos dibujar textos. Los tipos de letra, tamaos y grosores se establecen de manera parecida a como se hace con CSS y siguen las mismas reglas con respecto a los tipos de letras, tamaos y grosores disponibles. A diferencia de CSS, no existe aqu el concepto de mrgenes internos o externos. En este caso el texto se sita en la posicin definida por las coordenadas X e Y, que expresan la distancia en pxels horizontal y vertical, con respecto al origen (la esquina superior izquierda del canvas). En esta seccin vamos a crear una tarjeta de identificacin con tu nombre para practicar con la escritura de textos en el canvas.1Abre el archivo05_addingtext.htmlque est en la carpetaHTML5_05lessonsy guarda una copia del mismo con el nombre 05_addingtext_work.html. Este archivo utiliza la misma plantilla que hemos estado usando hasta ahora, con la excepcin de dos rectngulos que sirven como fondo de la tarjeta.2Busca la segunda funcin strokeRect y aade este cdigo para dibujar el texto de cabecera:ctx.fillText('HELLO MY NAME IS', 12, 40);Esta lnea de cdigo dibuja un texto, que se indica en el primer parmetro, empezando en las coordenadas indicadas por los parmetros segundo (valor x) y tercero (valor y). Utiliza la fuente por defecto y el color del texto ser blanco, heredado del valor defillStyleque se ha declarado anteriormente en el cdigo.3Guarda el archivo HTML y vamos al navegador a ver el resultado, que debera quedar as:

La tarjeta de identificacin con un pequeo borde.4Para aumentar el tamao y grosor de la letra, inserta esta lnea de cdigo antes de la lnea del paso anterior:ctx.font = "bold 1.8em sans-serif";ctx.fillText('HELLO MY NAME IS', 12, 40);Puedes ver que, igual que ocurre con CSS, puedes definir el tamao de la fuente utilizando valores relativos. En este caso el texto de cabedera ser 1,8 veces el tamao de la fuente del elemento canvas, tamao que viene heredado del objeto de la pgina HTML salvo que indiquemos expresamente otra cosa.5Guarda el archivo HTML y visualzalo en el navegador, para ver los cambios:

La tarjeta de identificacin con una cabecera ms grande.6Para aadir tu nombre a la tarjeta, inserta otra llamada a fillText. Para conseguir que el texto destaque y parezca escrito a mano, vamos a utilizar una fuente distinta, con un tamao mayor. Debajo del cdigo del paso 2, aade lo siguiente:ctx.fillStyle = 'rgb(0, 0, 0)';ctx.font = 'bold 84px Comic Sans MS';ctx.textAlign = 'center';ctx.fillText('Dianne', 150, 150);La primera lnea cambia el color del texto a negro. La segunda, fija la fuente con un valor absoluto de 84 pixels de altura y el tipo de letra ser Comic Sans MS, que es un tipo de letra que imita la escritura manual. La siguiente lnea establece el alineamiento horizontal del texto con respecto a la coordenada de posicin, y le aplica el valor center. Otras posibilidades de alineamiento horizontal son right y el valor por defecto (left).7Guarda el archivo HTML y visualzalo en el navegador:

La tarjeta de identificacin con el nombre y una bonita cabecera.

Uso de colores, estilos y gradientesHasta ahora hemos utilizado colores slidos, pero la mayora de objetos reales presentan transiciones suaves de un color a otro. Este tipo de transiciones se reproducen en el canvas utilizandogradientes, que pueden ser de tipo lineal o radial. Adems, en esta seccin vamos a ver distintas maneras de definir los colores, incluyendo valores de transparencia.1Abre el archivo 05_colorsstylesandgradients.htmlque se encuentra en la carpetaHTML5_05lessonsy guarda una copia con el nombre05_colorsstylesandgradients_work.html. El archivo utiliza algunos trazos que sirven para dibujar la silueta de un vaso de Coca Cola.2Abre el navegador y visualiza la pgina HTML: el vaso aparece vaco:

Un vaso de Coca Cola vaco con una sombra negra.3Vuelve al editor y debajo de la funcin strokeRect Cambia el color de fillStyle desde el negro actual a gris, como se indica aqu:ctx.fillStyle = 'gray';En las secciones anteriores de esta leccin hemos utilizado siempre la notacin RGB para definir los colores, pero existen ciertas palabras reservadas que facilitan su uso. Otros trminos para designar colores son "red", "blue", "orange", "purple", etc..4Guarda el archivo HTML y pasa al navegador para comprobar cmo ha quedado con los cambios.

Un vaso de Coca Cola vaco con una sombra mas clara.5Tambin se puede rellenar el vaso con algo que simula la Coca Cola utilizando un gradiente lineal. Despus de la seccin comentada con el texto "cup inline" y antes de la seccin que viene encabezada por el comentario "cup outline", inserta estas lneas de cdigo:var lineGrad = ctx.createLinearGradient(150, 81, 150, 268);lineGrad.addColorStop(0, '#fff');lineGrad.addColorStop(0.05, '#450c0c');lineGrad.addColorStop(0.6, '#874040');lineGrad.addColorStop(1, 'rgba(202, 147, 147, 0.6)');ctx.fillStyle = lineGrad;La primera lnea define un nuevo pincel de gradiente lineal donde los dos primeros argumentos definen el punto inicial del gradiente y los dos siguientes, el punto final. Para fijar la posicin se utilizan coordenadas X e Y, igual que cuando colocbamos rectngulos o crculos.Las siguientes cuatro lneas definen una serie de "puntos de parada" del gradiente. El primer parmetro define la posicin del punto de parada de color relativo al punto de comienzo y finalizacin del gradiente (donde 0 representa el punto de inicio y 1, el punto final). El segundo parmetro define el color del punto de parada.El formato hexadecimal se utiliza para declarar los tres primeros colores. El ltimo color queda definido utilizando la funcin rgba, que ampla la funcin rgb aadiendo un cuarto parmetro, llamado "alpha" o tambin "opacidad" del color. La opacidad vara en una escala de 0 a 1, siendo cero el valor de la transparencia completa y 1 la mxima opacidad.Si quieres conocer mejor los conceptos de la notacin de color RGBA, puedes consultar el libro "HTML5 Digital Classroom" y en concreto, la Leccin 11 "Aplicando estilos con CSS3".La ltima lnea cambia el valor de fillStyle al nuevo pincel de gradiente lineal.6El ltimo paso ser rellenar el contorno del vaso. En la seccin que sigue al comentario "cup outline", aade la siguiente lnea despus de la funcin stroke.ctx.fill();7Guarda el archivo HTML y visualzalo en el navegador para ver el resultado:

Un vaso lleno de Coca Cola.8Vuelve al editor. Mediante el empleo de varios gradientes radiales vamos a aadir burbujas al vaso de Coca Cola. Despus de la lnea de cdigo ctx.fill que has escrito en el paso 6, aade estas lneas:ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';ctx.lineWidth = 2;La primera cambia el trazo, que pasa del negro por defecto a un blanco semitransparente. La segunda lnea cambia la anchura del trazo desde el valor por defecto (1 pixel) a 2 pixels..9Debajo de las lneas escritas en los pasos anteriores, aade estas:>var radGrad = ctx.createRadialGradient(116, 107, 1, 120, 110, 10);radGrad.addColorStop(0, 'white');radGrad.addColorStop(0.9, 'rgba(255, 255, 255, 0)');La primera lnea define un gradiente radial de manera similar a como se hace con el gradiente lineal. Se indican los puntos de inicio y final del gradiente (los parmetros primero y segundo para el punto de inicio, y el tercer y cuarto argumentos, para el punto de finalizacin). La diferencia principal son los argumentos tercero y sexto, que se utilizan para indicar los radios de los respectivos puntos.En este ejemplo, el punto de inicio se define en la posicin x=116, y=107, con un radio de 1. El punto final queda definido por las coordenadas x=120, y=110, con un radio de 10.10Una vez definido el gradiente radial, podemos utilizarlo para rellenar un crculo que representa una burbuja. Despus de las lneas de los pasos anteriores, aade estas otras.ctx.fillStyle = radGrad;ctx.beginPath();ctx.arc(120, 110, 10, 0, Math.PI * 2, false);ctx.fill();ctx.stroke();11Guarda el archivo HTML y pasa al navegador para ver el resultado de estos cambios:

Un vaso lleno de Coca Cola con una burbuja.12Para aadir otra burbuja tenemos que definir otro pincel de gradiente porque las coordenadas han quedado establecidas en una posicin absoluta. Si movemos o cambiamos el tamao de la burbuja, tenemos que mover el pincel tambin. Debajo del cdigo del paso 10, aade estas lneas:radGrad = ctx.createRadialGradient(164, 140, 1, 168, 143, 8);radGrad.addColorStop(0, 'white');radGrad.addColorStop(0.9, 'rgba(255, 255, 255, 0)');ctx.fillStyle = radGrad;ctx.beginPath();ctx.arc(168, 143, 8, 0, Math.PI * 2, false);ctx.fill();ctx.stroke();13Guarda el archivo HTML y pasa al navegador para ver el resultado de estos cambios:

Un vaso lleno de Coca Cola con dos burbujas.14Aadiremos una burbuja ms para finalizar la composicin: debajo del cdigo del paso anterior, aade estas lneas:radGrad = ctx.createRadialGradient(127, 185, 1, 130, 188, 6);radGrad.addColorStop(0, 'white');radGrad.addColorStop(0.9, 'rgba(255, 255, 255, 0)');ctx.fillStyle = radGrad;ctx.beginPath();ctx.arc(130, 188, 6, 0, Math.PI * 2, false);ctx.fill();ctx.stroke();15Guarda el archivo HTML y pasa al navegador para ver el resultado de estos cambios:

Un vaso lleno de Coca Cola con tres burbujas.

Aadir imgenesPodemos utilizar una funcin muy sencilla, llamada drawImage para dibujar una imagen en el canvas. La parte ms complicada es asegurarnos de que cuando llamemos a la funcin, le da tiempo suficiente al navegador para descargar la imagen externa. Una vez que la tiene disponible, la funcin drawImage nos ofrece una gran flexibilidad a la hora de determinar el tamao de la imagen y el sitio donde se mostrar.1En la carpetaHTML5_05lessons,abre el archivo05_addingimages.htmly guarda una copia en esa misma carpeta con el nombre 05_addingimages_work.html. El archivo est preparado como copia de la plantilla original del canvas que utilizbamos en la primera parte de esta leccin.2Visualiza desde el sistema operativo el archivofishlake.jpgque hay en la carpetaimagespara que veas la imagen que vamos a utilizar en este ejercicio.3En la sentencia if, detrs de la declaracin de la variable ctx aade el cdigo siguiente:var img = new Image();img.onload = function(){}img.src = 'images/fishlake.jpg';La primera lnea declara un nuevo objeto de tipo imagen y la segunda define una funcin para el eventoonloadde la propia imagen. En la ltima lnea se indica el URL del archivo de imagen a utilizar. Una vez que el navegador ha descargado la imagen, hace una llamada a la funcin de la segunda lnea.4Dentro de los smbolos de llaves ({, }) de la funcin onload, aade este cdigo marcado en rojo:img.onload = function(){ctx.drawImage(img, 0, 0);}Esta instruccin le indica al canvas que tiene que reproducir la imagen en las coordenadas 0,0.5Guarda el archivo HTML y brelo en el navegador para ver cmo queda despus de estos cambios:

La imagen original aparece est recortada.La imagen aparece en pantalla, pero recortada porque el tamao original del archivo es mayor que el tamao del canvas.6Para cambiar el tamao de la imagen y que quepa en el espacio disponible, vamos a aadir a la funcin drawImage una anchura de destino de 300 y una altura de 200 pixels. Modifica la lnea que has escrito en el paso cuatro aadiendo estos dos nuevos argumentos a la funcin:ctx.drawImage(img, 0, 0, 300, 200);Con ello le indicamos al canvas que tiene que mostrar la imagen en la posicin 0,0 y alterar su tamao para conseguir una vieta de 300x200 pixels.7Guarda el archivo HTML y visualzalo en el navegador para comprobar el efecto de este cambio:

La imagen del lago despus de cambiar el tamao para que quepa en el espacio disponible.8La ltima variacin que haremos sobre la funcin drawImage es definir la posicin de inicio, la anchura y la altura junto con la posicin de destino, anchura y altura. Modifica la misma lnea del paso cuatro de esta manera:ctx.drawImage(img, 287, 132, 100, 100, 0, 0, 300, 300);Con este cambio le estamos indicando al canvas que tiene que mostrar la imagen en la posicin 0,0, con una anchura y altura de 300 pixels, utilizando una porcin rectangular de la imagen original que empieza en la posicin (287,132) y con una anchura y altura de 100 pixels.9Guarda el archivo HTML y vuelve al navegador para visualizar la pgina HTML y comprobar el efecto de este cambio.Esta tcnica de ampliacin de imgenes no es perfecta, ya que el resultado suele presentarse pixelado. En este caso lo vemos solo con fines de demostracin.

La imagen del lago, despus de ampliar una parte concreta .

Uso de las transformacionesLas transformaciones, combinadas con los estados de dibujo del Canvas nos permiten crear diseos complejos y dinmicos. Como hemos visto en apartados anteriores de esta leccin, los cambios globales como los que provocan strokeStyle, fillStyle y lineWidth, se guardan en distintos niveles de cambio de estado que podemos guardar y recuperar ms tarde. Los tres tipos de transformaciones (cambio de escala, rotaciones y traslaciones) tambin se guardan en niveles de cambios de estado globales y se pueden utilizar fcilmente si sabemos cmo hacerlo, empleando las funciones save y restore.1En la carpetaHTML5_05lessons, abre el archivo05_usingtransforms.htmly guarda una copia en la misma carpeta con el nombre 05_usingtransforms_work.html. El archivo muestra cinco cuadrados negros en fila, dentro del canvas.2Abre el navegador y muestra la pgina para ver los cuadrados. En realidad, aunque son figuras cuadradas, son "rectngulos" (de lados iguales). Aqu los consideraremos "rectngulos".

Cinco rectngulos.3Despus del comentario relativo al rectngulo 1 y antes del comentario del rectngulo 2, aade esta lnea de cdigo indicada en rojo://rectangle1ctx.fillRect(30, 120, 40, 40);ctx.translate(0, 20);//rectangle2ctx.fillRect(80, 120, 40, 40);La transformacin de traslacin provoca un desplazamiento para cualquier instruccin posterior, basada en el primer parmetro que corresponde con el valor de desplazamiento sobre el eje X, y el segundo parmetro que es el valor de desplazamiento sobre el eje Y.4Guarda el archivo HTML y pasa al navegador para ver el resultado de este cambio.

Los cuatro rectngulos siguientes se han desplazado hacia abajo, al aplicar el desplazamiento sobre el eje Y.5Como ves, la transformacin de traslacin se aplica a todas las instrucciones que aparecen a partir de ella. Del comentario del rectngulo 1 y antes del cdigo que has escrito en el paso 3, aade la siguiente lnea, para que el cdigo quede as://rectangle1ctx.fillRect(30, 120, 40, 40);ctx.save();ctx.translate(0, 20);6Despus del comentario del rectngulo 4 y antes del rectngulo 5, aade la lnea indicada aqu en rojo://rectangle4ctx.fillRect(180, 120, 40, 40);ctx.restore();//rectangle5ctx.fillRect(230, 120, 40, 40);Con estos cambios, lo que hacemos es que antes de aadir la transformacin de traslacin, guardamos una "instantnea" del estado global del canvas. Despus de dibujar el cuarto rectngulo recuperamos el estado global del canvas a la situacin que tenamos antes de que se aplicase la transformacin.7Guarda el archivo HTML y vuelve al navegador para visualizar la pgina y comprobar el efecto de estos cambios.

Ahora, solo los tres rectngulos centrales se desplazan hacia abajo sobre el eje vertical.8Vuelve al editor, y despus del comentario del rectngulo 2 y antes del rectngulo 3, aade estas dos lneas:ctx.save();ctx.rotate(0.19);La primera guarda otra vez una captura de los valores globales de estado del canvas. La segunda aade una transformacin de rotacin donde el parmetro corresponde al valor en radianes del giro que queremos aplicar a la figura.9Guarda al archivo HTML y visualzalo en el navegador para comprobar los cambios.

Los cuatro ltimos rectngulos aparecen ms abajo y en el centro, dos de ellos girados levemente.Al llamar a la funcin save dos veces y solo una a la funcin restore, el ltimo rectngulo queda afectado por la transformacin de traslacin, pero no por la de rotacin.10En el editor, detrs del comentario del rectngulo tres y antes del rectngulo 4, aade esta lnea:ctx.restore();11Guarda el archivo HTML y vuelve al navegador para ver los cambios en la pgina.

Tres rectngulos desplazados hacia abajo y uno de ellos girado12Debajo de la funcin restore del paso 6 y antes del rectngulo 5, aade esta lnea:ctx.scale(0.5, 0.7);13Guarda de nuevo el archivo y visualzalo en el navegador:

Tres rectngulos desplazados hacia abajo, uno rotado y otro con un cambio de escala.

Creacin de un bucle de dibujoAhora que tienes unas nociones bsicas de dibujo con el canvas, vamos a ver la parte "dinmica" de este elemento. Ciertas funciones de JavaScript como setInterval, nos permiten llamar de manera reiterada a una funcin de dibujo. En cada llamada podemos modificar ligeramente algn parmetro de la figura y con ello se genera la ilusin de animacin.1En la carpetaHTML5_05lessons, abre el archivo05_drawingloop.htmly guarda una copia del mismo con el nombre 05_drawingloop_work.html. Este archivo contiene un cdigo que dibuja un bonito cielo nocturno con un platillo volante.2Abre el navegador para ver la composicin inicial.

Un cielo nocturno y un platillo volante.3Revisa el cdigo JavaScript que genera el bucle de dibujo.Como suceda en los apartados anteriores, el eventoonloaddel cuerpo de la pgina llama a la funcinsetupque abre el objeto de imagen y descarga el archivo ufo.png. Fjate bien en que las variables ctx e img inicialmente se declaranfuerade la funcin setup. As conseguimos que estas variables puedan utilizarse desde otras funciones, en este caso las funciones draw y drawbackground.Despus de que se abre la imagen podemos utilizar la funcin setInterval para llamar a la funcin draw cada 36 milisegundos.La funcin draw despus llama a la funcin drawbackground que se encarga de dibujar el cielo y las estrellas. Acto seguido, llega al comentario de "ufo" y a partir de ah empieza a dibujar el platillo volador.4Debajo de la lnea donde se define la variable img y antes de la funcin setup, aade las lneas de cdigo que se muestran en rojo aqu: var ctx;var img;var x = 0;var y = 40;Estas variables se utilizan para cambiar la posicin del platillo volante, pero tendremos que modificar la funcin drawpara que utilice estas nuevas variables.5En la funcin draw cambia drawImage para que utilice estas nuevas variables y actualice el valor de x de la siguiente manera:function draw() {drawBackground();ctx.drawImage(img, x, y);x += 1;}6Guarda el archivo HTML y vuelve al navegador para comprobar el resultado de estos cambios. El platillo volador se mueve ahora lentamente por el canvas.

El platillo volante movindose por el cielo nocturno.7Para repetir la accin y que el platillo volador vuelva a su sitio cuando se sale del rea visible, tenemos que reiniciar la variable x en el momento en que su valor supere la anchura del canvas. Adems, podemos variar la velocidad de desplazamiento si aumentamos el incremento de la variable x de esta forma:

x += 3;if(x > 300){x = -50;}El valor de la variable x se reinicia a 50 en lugar de cero porque tenemos que tener en cuenta el tamao de la propia imagen del platillo volante (50 pixels).8Guarda el archivo HTML y vuelve al navegador para comprobar el efecto de estos cambios. Cuando el platillo volante llega al borde derecho del canvas, desaparece y reaparece luego en el lado izquierdo.

El platillo volante se mueve por el cielo, sale por el lado derecho y regresa por el izquierdo9Para animar imgenes podemos utilizar tambin la funcin Math.random de JavaScript. Por ejemplo, podemos cambiar el valor de la variable y de forma aleatoria, y as nuestro platillo volador, al desaparecer por el lado derecho, volver por el izquierdo en un lugar imprevisible. En la sentenciaifque utilizamos para reiniciar la variable x, inserta la lnea que aparece aqu en rojo:x += 3;if(x > 300){x = -50;y = Math.random() * 300;}Math.random devuelve un nmero aleatorio entre 0 y 1 que debe multiplicarse por el nmero mximo que queremos que nos devuelva. En este caso es 300, que es la altura del canvas.10Guarda el archivo HTML y vuelve al navegador para ver el efecto de este cambio. El platillo va movindose por el cielo en distintas alturas de forma aleatoria.

El platillo se desplaza cambiando de altura a cada ciclo.

Dibujo de grficas con CanvasEl canvas no solo nos permite diseos estticos, sino tambin mostrar contenidos cuya forma puede venir derivada de datos externos. En la siguiente prctica vamos a crear un grfico de barras tomando como fuentes de datos una matriz simple.1Abre el archivo05_graphing.htmlen el editor. Guarda una copia en la misma carpeta con el nombre05_graphing_work.html. Como ves, en el cdigo de este archivo hay una matriz de datos que ya hemos definido con una serie de objetos que representan cada uno de los componentes que vamos a dibujar en el diagrama de barras.var sampleData = [ { label:"Profit", value: 1200 }, { label:"Expenses", value: 800 }, { label:"Budget", value: 1000 }];La matriz se compone de tres objetos, cada uno compuesto a su vez por una etiqueta y un valor. La propiedad "label" contiene el nombre de cada componente. La propiedad "value" define el valor de ese componente, y es el nmero que utilizaremos en esta prctica para calcular el tamao relativo de cada barra dentro del diagrama.2Aade las siguientes variables para guardar informacin de color y formato necesaria para el grfico, directamente debajo de la matriz de datos que hemos comentado en el paso anterior.var colors = ["rgb(255, 0, 0)", "rgb(0, 255, 0)", "rgb(0, 0, 255)"];var margin = 30;var spacing = 5;var labelFont = "12px sans-serif";3En la funcin window.onload que ya viene definida dentro del archivo HTML, aade este cdigo para indicar el estilo de la fuente y su alineamiento dentro del canvas (las lneas en rojo):window.onload = function(){ var canvas = document.getElementById('barGraph'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.font = labelFont; ctx.textAlign = "center"; }}4Justo debajo de ese mismo cdigo, incluye tres nuevas variables que van a guardar valores temporales (las indicadas en rojo): ctx.textAlign = "center"; var value, label, highest = 0;5Despus necesitaremos establecer el valor mximo dentro de nuestra matriz de datos para poder dibujar las barras correctamente. Aade este bucle justo debajo del cdigo que acabas de escribir en el paso anterior, para calcular el valor ms alto.for( var i = 0; i < sampleData.length; i++ ){ value = sampleData[i].value; if( value && value > highest ) highest = value;}La variablehighestva a contener el valor ms elevado de la serie de datos de nuestra matriz de ejemplo.6Para recordar los valores de medida y posicin de cada una de las barras que deben dibujarse, aade un objeto "bar" que va guardar los valores de posicin x e y, la anchura y la altura de cada barra. Este cdigo debe aadirse justo debajo del bucle del paso anterior.var bar = { x: margin, y: canvas.offsetHeight - margin, width: (canvas.offsetWidth - margin * 2 - ( spacing * ( sampleData.length - 1 ) ) ) / sampleData.length, height: 0};En esta prctica, todas las barras del diagrama tienen la misma anchura. Esta anchura la calculamos dividiendo el ancho total del canvas por el nmero de elementos de nuestra matriz, aadindole todos los mrgenes y espacios necesarios. El valor vertical (y) se especifica a partir del borde inferior del canvas, puesto que es donde se empiezan a dibujar las barras.7A continuacin vamos a crear un bucle para dibujar cada una de las barras del grfico. Guardamos la etiqueta y el valor del elemento en curso dentro de variables temporales y cambiamos el valor de fillColor activo del canvas a un color distinto, recorriendo la matriz de colores definida anteriormente. Este cdigo debers aadirlo directamente despus del que has escrito en el paso anterior.for( i = 0; i < sampleData.length; i++ ){ value = parseInt(sampleData[i].value); label = sampleData[i].label; ctx.fillStyle = colors[ i % sampleData.length ];}8La altura de cada barra se obtiene calculando la proporcin entre la barra ms grande y la altura del canvas. La altura debe ser un valor negativo ya que las barras se vana dibujar desde abajo hacia arriba partiendo de la base del canvas. Aade este cdigo (la lnea destacada en rojo) dentro del bucle del paso anterior:ctx.fillStyle = colors[ i % sampleData.length ];bar.height = -(canvas.offsetHeight / highest * value - margin * 2);}9Lo siguiente que necesitamos es desplazar el puntero de dibujo un poco para separar cada barra con respecto a la anterior, y darles un pequeo espacio entre medias, a fin de que aparezcan como columnas verticales independientes. Aumenta el valor de la posicin horizontal para cada barra aadiendo a su valor de x la anchura de cada columna ms el tamao en pixels del espacio de separacin. Esto lo hace la lnea destacada en rojo: bar.height = -(canvas.offsetHeight / highest * value - margin * 2); bar.x += bar.width + spacing;}10Escribe la lnea siguiente directamente encima de la que acabas de escribir en el paso anterior para dibujar las barras (la lnea en rojo). ctx.fillRect( bar.x, bar.y, bar.width, bar.height );bar.x += bar.width + spacing;11Guarda el archivo y brelo ahora en el navegador. Podrs ver tres barras con tres colores distintos.

El grfico muestra los valores en forma de barras, pero no incluye etiquetas.

Creacin de las etiquetasPara que el diagrama de barras sea realmente til tendremos que aadir diversos indicadores visuales que aadan un contexto, tanto para conocer a qu dato refiere cada barra como para saber el valor a que corresponde. Estas etiquetas deben obtenerse a partir del origen de datos.1 Tras la lnea de cdigo aadida en el paso anterior, escribe la siguiente lnea de cdigo que genera una etiqueta de texto debajo de cada barra, con el nombre de la columna. Es la lnea indicada en rojo aqu:ctx.fillRect( bar.x, bar.y, bar.width, bar.height );ctx.fillText( label, bar.x + bar.width/2, bar.y + spacing + parseInt(labelFont) );bar.x += bar.width + spacing;La funcin fillText empezar a escribir en el centro de la columna. Se muestra correctamente en pantalla al aplicarse el alineamiento centrado del texto que hemos visto ya en prcticas anteriores. El espacio vertical se calcula a partir de la altura de la fuente.2 Guarda el archivo y visualzalo en el navegador. Los colores de las etiquetas coinciden con los de las barras correspondientes.

Cada barra tiene ahora una etiqueta debajo que sirve para identificarla.Pero ahora, aunque las columnas tienen nombre no sabemos realmente qu valores representan estas barras en trminos absolutos. Tendremos que aadir otra serie de etiquetas, en el lado izquierdo, para representar la escala de valores empleada.3 Debajo de las llaves que delimitan el bucle, aade esta lnea de cdigo para reiniciar el color de la fuente del canvas a negro otra vez (la lnea destacada en rojo aqu).for( i = 0; i < sampleData.length; i++ ){ ...}ctx.fillStyle = "rgb(0,0,0)";Dibujar textos en vertical seguramente acabar siendo ms fcil en el futuro, pero en el momento de redactar este manual, la forma ms sencilla de rotar textos consiste en rotar el propio canvas. Por suerte, el canvas nos permite guardar su estado previo, as que solamente tenemos que rotarlo de forma temporal.4 Creamos un bucle sencillo que se ejecutar tres veces, una por cada barra. Este bucle debe aparecer debajo del cdigo que hemos aadido en el paso anterior.for( i = 0; i < 3; i++ ){}5Dentro de este bucle vamos a guardar el estado del canvas antes de aplicar cualquier rotacin, lo que hacemos con la siguiente lnea (marcada en rojo).for( i = 0; i < 3; i++ ){ ctx.save();}6 Vamos a crear una sentencia switch debajo de esta lnea. Esta sentencia switch ejecuta una accin distinta dependiendo de la etiqueta que vayamos a dibujar (es el cdigo en rojo).for( i = 0; i < 3; i++ ){ ctx.save(); switch( i ) { }}7 Dentro de la sentencia switch, aade una instruccin case para la primera etiqueta (que se escribir en la parte inferior del grfico), la cual va a mostrar el nmero cero.for( i = 0; i < 3; i++ ){ ctx.save(); switch( i ) { case 0: label = "0"; ctx.textAlign = "right"; ctx.translate( margin-spacing-parseInt(labelFont), canvas.offsetWidth - margin ); break; }}Te habrs dado cuenta de que el canvas se desplaza al ejecutar la sentencia case. Aunque no es absolutamente necesario, esto facilita mucho la tarea de dibujar textos en vertical.8 Debajo de la llave de cierre de la sentencia switch vamos a aadir una instruccin para rotar el canvas 90 grados con la lnea de cdigo que se indica aqu en rojo:for( i = 0; i < 3; i++ ){ ctx.save(); switch( i ) { ... } ctx.rotate( Math.PI/2 );9 Ahora, con el canvas girado y colocado, solo tenemos que escribir el texto en l. Aade estas lneas de cdigo que figuran aqu en rojo, justo a continuacin de la lnea que has escrito en el paso anterior para dibujar texto en el punto donde dejamos nuestro "puntero de dibujo" y despus devolvemos al canvas a su estado anterior.for( i = 0; i < 3; i++ ){ ... ctx.rotate( Math.PI/2 ); ctx.fillText( label, 0, 0 ); ctx.restore();}10 Aunque se mostrar una de las etiquetas, las otras dos an no estn preparadas. Aade dos instrucciones "case" al selector "switch" que has modificado en el paso 7 para indicar las ubicaciones y los textos de las otras dos barras (escribe el cdigo sealado en rojo):switch( i ){ case 0: label = "0"; ctx.textAlign = "right"; ctx.translate( margin-spacing-parseInt(labelFont), canvas.offsetWidth - margin ); break; case 1: label = (highest/2).toString(); ctx.textAlign = "center"; ctx.translate( margin-spacing-parseInt(labelFont), canvas.offsetHeight /2 ); break; case 2: label = (highest).toString(); ctx.textAlign = "left"; ctx.translate( margin-spacing-parseInt(labelFont), margin ); break;}11 Guarda el archivo y comprueba el resultado en el navegador. Ahora ya tenemos un diagrama de barras completo creado a partir de un grupo de datos de ejemplo.

La altura de las columnas ahora se puede comparar con una escala en el lado izquierdo.

Recursos disponibles para saber ms sobre Canvas

Las capacidades del elemento canvas han generado una gran expectacin entre la comunidad de desarrolladores y diseadores web. Aqu te indicamos algunos recursos que te ayudaran a investigar ms a fondo las posibilidades de este elemento de HTML5.AI->CanvasEs un complemento para Illustrator que nos permite exportar creatividades desde la aplicacin y utilizar el cdigo canvas resultante en nuestras pginas web. Incluso dispone de soporte integrado para animaciones.http://visitmix.com/work/ai2canvas/LucidchartEsta aplicacin web es muy parecida a las aplicaciones de diagramas como Visio, y est totalmente construida con el elemento canvas. Como extra, podemos exportar los diseos que generemos con ella..http://www.lucidchart.com/documents/demo

AutoestudioPuedes seguir experimentando con el ejercicio de bucle de dibujo cambiando la imagen animada y la composicin del fondo de la escena. Para aadirle ms niveles de interaccin, cambia la posicin de la imagen en movimiento dependiendo de la posicin del ratn. Puedes probar a aplicar transformaciones a la composicin tambin, para ver cmo se aplican los efectos en transformaciones mltiples simultneas.RepasoPreguntas1Cules son los requisitos bsicos para dibujar con Canvas en HTML5?2Cmo se dibuja un crculo en el Canvas?3Cmo podemos definir un color semitransparente?

Respuestas1Debe definirse e incorporarse un elemento canvas al cuerpo de la pgina. Las instrucciones de dibujo se aplican despus utilizando una referencia al Contexto 2D del elemento canvas.2Utilizando la funcin arc podemos dibujar un crculo completo si indicamos los valores startAngle a cero y endAngle como Math.PI*2. Los ngulos se miden en radianes y la funcin Math.PI equivale a 180 grados.3La funcin rgba tiene cuatro parmetros. Los tres primeros representan los valores de color rojo, verde y azul, y pueden tener un valor entre 0 y 255, que modifica la fuerza de cada componente de color. El ltimo parmetro (alpha) admite valores entre cero y uno, y determina el grado de opacidad (cero es transparente y 1 totalmente opaco).