Tutorial de HTML 5

Qu es HTML 5
En el artculo anterior publicado en DesarrolloWeb.com, "El futuro del desarrollo web: HTML 5" e plicamos las ra!ones por las "ue es #erdaderamente importante esta nue#a #ersi$n del len%ua&e de marcaci$n HTML ' #imos "ui(nes son los "ue est)n lle#ando a cabo su especificaci$n. *+ora con#endra e plicar "u( es e actamente HTML 5, 'a "ue no es simplemente una nue#a #ersi$n del len%ua&e de marcaci$n HTML, sino una a%rupaci$n de di#ersas especificaciones concernientes a el desarrollo web. Es decir, HTML 5 no se limita s$lo a crear nue#as eti"uetas, atributos ' eliminar a"uellas marcas "ue est)n en desuso o se utili!an inadecuadamente, sino "ue #a muc+o m)s all). *s pues, HTML 5 es una nue#a #ersi$n de di#ersas especificaciones, entre las "ue se encuentran: HTML , -HTML . D/M 0i#el 1 2D/M 3 Document /b&etc Model4 * la par, HTML 5 pretende proporcionar una plataforma con la "ue desarrollar aplicaciones web m)s parecidas a las aplicaciones de escritorio, donde su e&ecuci$n dentro de un na#e%ador no impli"ue falta de recursos o facilidades para resol#er las necesidades reales de los desarrolladores. 5ara ello se est)n creando unas *56s "ue permitan traba&ar con cual"uiera de los elementos de la p)%ina ' reali!ar acciones "ue +asta +o' era necesario reali!ar por medio de tecnolo%as accesorias. Estas *56, "ue tendr)n "ue ser implementadas por los distintos na#e%adores del mercado, se est)n documentando con minuciosidad, para "ue todos los 7rowsers, creados por cual"uier compa8a las soporten tal cual se +an dise8ado. Esto se +ace con la intenci$n "ue no ocurra lo "ue #iene sucediendo en el pasado, "ue cada na#e%ador +ace la %uerra por su parte ' los "ue acaban pa%)ndolo son los desarrolladores ' a la postre los usuarios, "ue tienen muc+as posibilidades de acceder a webs "ue no son compatibles con su na#e%ador preferido.

Cundo estar listo HTML 5

9e%:n informan en la p)%ina de la or%ani!aci$n WH*TW;, HTML 5 se pre#( est( listo como especificaci$n de implementaci$n recomendada en el 1<.1. =>uiere esto decir "ue #amos a tener "ue esperar +asta 1<.1 para apro#ec+ar las #enta&as de HTML 5? realmente no es &ustamente as, puesto "ue al%unos na#e%adores 'a implementan muc+as de las caractersticas del moderno len%ua&e. @esulta "ue HTML 5 est) formado por muc+os m$dulos distintos, cu'o %rado de especificaci$n est) en ni#eles dispares. 5or tanto, muc+as de las caractersticas de HTML 5 est)n 'a listas para ser implementadas, en un punto de desarrollo "ue se encuentra cercano al "ue finalmente ser)

presentado. /tras muc+as caractersticas est)n toda#a simplemente en el tintero, a modo de ideas o borradores iniciales. De +ec+o, las #ersiones m)s nue#as de casi todos los na#e%adores, incluido el pol(mico 6nternet E plorer A, implementan al%unas de las caractersticas de HTML 5. Blaro "ue, para "ue una web se #ea bien en todos los sistemas, +a' "ue utili!ar s$lo a"uellas partes "ue funcionan en todos los na#e%adores, por lo "ue a da de +o', pocas son las utilidades realmente disponibles del len%ua&e, si "ueremos +acer un sitio web compatible. 0o obstante, en el peor de los casos, podemos empe!ar a usar a ni#el e perimental estas caractersticas, aun"ue s$lo sea para frotarnos las manos en espera de incorporarlas realmente en nuestras pr)cticas de desarrollo +abituales.

Cules son las novedades de HTML 5

HTML 5 inclu'e no#edades si%nificati#as en di#ersos )mbitos. Bomo decamos, no s$lo se trata de incorporar nue#as eti"uetas o eliminar otras, sino "ue supone me&oras en )reas "ue +asta a+ora "uedaban fuera del len%ua&e ' para las "ue se necesitaba utili!ar otras tecnolo%as.

Estructura del cuerpo: La ma'ora de las webs tienen un formato com:n, formado por elementos como cabecera, pie, na#e%adores, etc. HTML 5 permite a%rupar todas estas partes de una web en nue#as eti"uetas "ue representar)n cada uno de las partes tpicas de una p)%ina. Etiquetas para contenido especfico: Hasta a+ora se utili!aba una :nica eti"ueta para incorporar di#ersos tipos de contenido enri"uecido, como animaciones Clas+ o #deo. *+ora se utili!ar)n eti"uetas especficas para cada tipo de contenido en particular, como audio, #deo, etc. Canvas: es un nue#o componente "ue permitir) dibu&ar, por medio de las funciones de un *56, en la p)%ina todo tipo de formas, "ue podr)n estar animadas ' responder a interacci$n del usuario. Es al%o as como las posibilidades "ue nos ofrece Clas+, pero dentro de la especificaci$n del HTML ' sin la necesidad de tener instalado nin%:n plu%in. 5uedes conocer m)s sobre este nue#o elemento en el manual de can#as "ue estamos creando en DesarrolloWeb.com Bases de datos locales: el na#e%ador permitir) el uso de una base de datos local, con la "ue se podr) traba&ar en una p)%ina web por medio del cliente ' a tra#(s de un *56. Es al%o as como las BooDies, pero pensadas para almacenar %randes cantidades de informaci$n, lo "ue permitir) la creaci$n de aplicaciones web "ue funcionen sin necesidad de estar conectados a 6nternet. Web Wor ers: son procesos "ue re"uieren bastante tiempo de procesamiento por parte del na#e%ador, pero "ue se podr)n reali!ar en un se%undo plano, para "ue el usuario no ten%a "ue esperar "ue se terminen para empe!ar a usar la p)%ina. 5ara ello se dispondr) tambi(n de un *56 para el traba&o con los Web WorDers. !plicaciones "eb #ffline: E istir) otro *56 para el traba&o con aplicaciones web, "ue se podr)n desarrollar de modo "ue funcionen tambi(n en local ' sin estar conectados a 6nternet. $eolocali%aci&n: Las p)%inas web se podr)n locali!ar %eo%r)ficamente por medio de un *56 "ue permita la ;eolocali!aci$n.

'uevas !()s para interfa% de usuario: temas tan utili!ados como el "dra% E drop" 2arrastrar ' soltar4 en las interfaces de usuario de los pro%ramas con#encionales, ser)n incorporadas al HTML 5 por medio de un *56. *in de las etiquetas de presentaci&n: todas las eti"uetas "ue tienen "ue #er con la presentaci$n del documento, es decir, "ue modifican estilos de la p)%ina, ser)n eliminadas. La responsabilidad de definir el aspecto de una web correr) a car%o :nicamente de B99. Bomo se puede #er, e istir)n #arios *56 con los "ue podremos traba&ar para el desarrollo de todo tipo de aplicaciones comple&as, "ue funcionar)n online ' offline. >ui!)s se entienda me&or por "u( HTML 5 es un pro'ecto tan ambicioso ' "ue est) lle#ando tanto tiempo para ser elaborado.

)ntroducci&n a Canvas del HTML 5

HTML 5 #iene con #arias no#edades interesantes ' una de las "ue podemos empe!ar a probar 'a es el Ban#as. Ban#as si%nifica en espa8ol al%o as como lien!o ' es b)sicamente eso, un )rea donde podemos dibu&ar como si fuera un lien!o. El elemento can#as permite especificar un )rea de la p)%ina donde se puede, a tra#(s de scripts, dibu&ar ' renderi!ar im)%enes, lo "ue ampla notablemente las posibilidades de las p)%inas din)micas ' permite +acer cosas "ue +asta a+ora estaban reser#adas a los desarrolladores en Clas+, con la #enta&a "ue para usar can#as no ser) necesario nin%:n plu%in en el na#e%ador, lo "ue me&orar) la disponibilidad de esta nue#a aplicaci$n. En este artculo ' los si%uientes pretendemos dar una introducci$n a can#as, para los lectores de DesarrolloWeb.com interesados en conocer de cerca esta nue#a utilidad de HTML 5. *l menos esperamos dar a conocer las posibilidades del can#as ' ofrecer al%unos e&emplos "ue se puedan probar 'a en los na#e%adores m)s modernos.

Co+patibilidad de canvas
El can#as se desarroll$ inicialmente por *pple para su na#e%ador 9afari ' lue%o fue utili!ado ' estandari!ado por la or%ani!aci$n WH*TW; para incorporarlo a HTML 5. 5osteriormente tambi(n +a sido adoptado por na#e%adores como Cirefo ' /pera. 5or lo "ue respecta a B+orme, es un na#e%ador "ue utili!a el mismo motor de renderi!ado "ue 9afari, por lo "ue tambi(n soporta el elemento Ban#as. De entre los na#e%adores m)s +abituales s$lo nos "ueda por soportar can#as el siempre pol(mico 6nternet E plorer. La :ltima #ersi$n del na#e%ador en el momento de escribir este artculo, 6nternet E plorer A, no soporta can#as con funciones nati#as, pero e isten di#ersos pro'ectos ' plu%ins "ue pueden ampliar las funcionalidades del na#e%ador para dar soporte a este nue#o elemento del HTML 5. 5or e&emplo, e iste el pro'ecto E plorer Ban#as en el "ue se +a preparado un plu%in para "ue E plorer soporte el dibu&o 1d "ue permite can#as. 9in embar%o, aun"ue en di#ersos frentes se +a comen!ado a utili!ar Ban#as, la falta de soporte de E plorer +ace "ue toda#a no sea mu' recomendable su incorporaci$n a las aplicaciones web, 'a

"ue la ma'ora de los usuarios, "ue utili!an e plorer, no podran #er las partes de la p)%ina donde se utili!a can#as. Esta situaci$n se espera "ue cambie durante los pr$ imos meses o a8os, puesto "ue la incorporaci$n de can#as al HTML 5 'a es una realidad e 6nternet E plorer m)s tarde o temprano tendr) "ue dar soporte esta utilidad en su na#e%ador, si no "uiere "ue se descarte su utili!aci$n por parte de los usuarios "ue deseen acceder a los ser#icios web m)s a#an!ados.

(ol+ica por la propiedad intelectual de Canvas

Fno de los problemas de can#as es "ue se cre$ ba&o propiedad intelectual de *pple, es decir "ue dic+a empresa era la creadora de la in%eniera "ue daba soporte a este nue#o elemento ' por tanto se encontraba ba&o patentes de la compa8a. Este +ec+o, a8adido a la e istencia de un formato abierto "ue sir#e para +acer cosas similares como es el 9G;, +i!o "ue sur%iera una pol(mica sobre la aceptaci$n de este elemento en el nue#o est)ndar del HTML 5. *fortunadamente *pple abri$ la licencia de uso de patente, liberando la propiedad intelectual de la misma, condici$n estrictamente necesaria para "ue la WHB, "ue siempre apo'a patentes libres, incorporase finalmente can#as dentro del nue#o est)ndar del len%ua&e HTML.

!plicaciones de uso de Canvas

Ban#as permite dibu&ar en la p)%ina ' actuali!ar din)micamente estos dibu&os, por medio de scripts ' atendiendo a las acciones del usuario. Todo esto da unas posibilidades de uso tan %randes como las "ue disponemos con el plu%in de Clas+, en lo "ue respecta a renderi!aci$n de contenidos din)micos. Las aplicaciones pueden ser %randes como podamos ima%inar, desde &ue%os, efectos din)micos en interfaces de usuario, editores de c$di%o, editores %r)ficos, aplicaciones, efectos HD, etc. *ctualmente al%unas de las aplicaciones m)s no#edosas para para la web utili!an 'a can#as para su funcionamiento, donde se puede destacar 7espin, un editor de c$di%o de Mo!illa, o ;oo%le Wa#e. En la entrada de la WiDi sobre Ban#as podemos encontrar di#ersos enlaces a sitios web con e&emplos de uso de este elemento del HTML 5. En los si%uientes artculos #eremos e&emplos de uso de can#as ' e plicaremos c$mo podemos utili!ar nosotros mismos esta nue#a +erramienta del HTML 5.

E,e+plo de dibu,o con el !() de canvas

En el artculo anterior e plicamos "u( era el elemento can#as del HTML 5, as "ue podemos pasar a #er un primer e&emplo de utili!aci$n del mismo para "ue los lectores de DesarrolloWeb.com puedan ir conociendo este nue#o sistema. 5ara comen!ar reali!aremos un e&emplo de dibu&o de dos rect)n%ulos con distintos colores, "ue reali!aremos utili!ando el un par de funciones del *56 de dibu&o en can#as mediante Ia#ascript. Blaro "ue el elemento can#as tiene muc+as cosas "ue debemos conocer para ir solt)ndonos en su mane&o, pero al menos podremos #er una primera prueba para ir abriendo boca.

El e&emplo se basa en dos partes, primero una en la "ue colocaremos un lien!o can#as en un lu%ar de nuestra p)%ina, con la eti"ueta HTML "B*0G*9" ' lue%o otra parte en la "ue dibu&aremos dentro de ese elemento los rect)n%ulos con pro%ramaci$n Ia#ascript. 9obra decir "ue +ar)n falta unos conocimientos al menos b)sicos de Ia#ascript para poder traba&ar con el can#as.

Colocar el ele+ento HTML canvas

*+ora comencemos situando dentro del cuerpo de la p)%ina la eti"ueta B*0G*9. Esta eti"ueta, como decamos forma parte del est)ndar del HTML 5. Jcan#as id3"mican#as" widt+3"1<<" +ei%+t3".<<"K Este te to se muestra para los na#e%adores no compatibles con can#as. JbrK 5or fa#or, utili!a Cirefo , B+rome, 9afari u /pera. JLcan#asK El elemento tiene apertura ' cierre ' entre medias podemos escribir un te to "ue ser) lo "ue #ean los usuarios "ue entren con na#e%adores "ue no soporten la eti"ueta B*0G*9. 5ara especificar las caractersticas de este can#as tenemos #arios atributos: !tributo id5ara asi%narle un nombre :nico ' lue%o referirnos a este can#as desde Ia#ascript. !tributos "idt. / .ei0.t5ara indicar la anc+ura ' altura del )rea del can#as. /tros atributos se pueden colocar de manera opcional, como por e&emplo st'le, para indicar atributos de +o&as de estilo para definir el aspecto del lien!o.

(intar en un canvas +ediante 1avascript

E isten di#ersas funciones 'a listas para dibu&ar formas ' tra!ados en un can#as. 0osotros podemos combinarlas para +acer dibu&os m)s comple&os. 5ero en este caso #amos a empe!ar dibu&ando un par de sencillas formas. 0o obstante, como #eremos tambi(n, debemos +acer antes unas comprobaciones para saber si el na#e%ador "ue est) e&ecutando esta p)%ina es compatible con can#as. 6nicialmente el can#as est) en blanco ' cuando "ueremos pintar sobre (l tenemos "ue acceder al conte to de renderi!ado del can#as, sobre el "ue podremos in#ocar distintos m(todos para acceder a las funciones de dibu&o. El proceso simplificado sera el si%uiente: LL@ecibimos el elemento can#as #ar can#as 3 document.%etElement7'6d2Mmican#asM4N LL*ccedo al conte to de M1dM de este can#as, necesario para dibu&ar #ar conte to 3 can#as.%etBonte t2M1dM4N

LLDibu&o en el conte to del can#as conte to.fill@ect25<, <, .<, .5<4N 5rimero con el m(todo %etElement7'6d24 obten%o el elemento de la p)%ina "ue se pasa como par)metro, "ue es el can#as. Lue%o accedo al conte to 1D del can#as, "ue es el "ue tiene #arios m(todos "ue sir#en para dibu&ar en el lien!o. 5or :ltimo puedo e&ecutar tantos m(todos como desee sobre el conte to del can#as para pintar elementos en el lien!o. Bomo deca, estas sentencias Ia#ascript no son compatibles con todos los na#e%adores, por lo "ue +abr) "ue +acer unas comprobaciones b)sicas, para saber si e&ecutar o no las distintas instrucciones de dibu&o.Geamos este c$di%o, un poco m)s elaborado, "ue +ace las comprobaciones necesarias para no +acer nada en el caso "ue el na#e%ador no sea compatible con can#as. LL@ecibimos el elemento can#as #ar elemento 3 document.%etElement7'6d2Mmican#asM4N LLBomprobaci$n sobre si encontramos un elemento LL' podemos e traer su conte to con %etBonte t24, "ue indica compatibilidad con can#as if 2elemento EE elemento.%etBonte t4 O LL*ccedo al conte to de M1dM de este can#as, necesario para dibu&ar #ar conte to 3 elemento.%etBonte t2M1dM4N if 2conte to4 O LL9i ten%o el conte to 1d es "ue todo +a ido bien ' puedo empe!ar a dibu&ar LLBomien!o dibu&ando un rect)n%ulo conte to.fill@ect2<, <, .5<, .<<4N LLcambio el color de estilo de dibu&o a ro&o conte to.fill9t'le 3 MPcc<<<<MN LLdibu&o otro rect)n%ulo conte to.fill@ect2.<, .<, .<<, Q<4N R R El c$di%o est) comentado para "ue se pueda entender m)s f)cilmente. *+ora s$lo falta una :ltima cosa, "ue es e&ecutar estas acciones s$lo cuando la p)%ina est( car%ada por completo ' lista para recibirlas. Esto lo conse%uimos con la el e#ento onload del bod' de la p)%ina: Jbod' onload3"funcionDeDibu&o24"K Blaro "ue tendremos "ue crear la funcionDeDibu&o24 con el c$di%o anterior para operar con el can#as.

/ bien podemos utili!ar este otro recurso para asi%nar el e#ento directamente desde un script Ia#ascript: window.onload 3 function24O LLinstrucciones de dibu&o en can#as R El c$di%o completo de nuestro primer e&emplo de uso de can#as sera el si%uiente: J+tmlK J+eadK JtitleK5robando can#asJLtitleK JscriptK window.onload 3 function24O LL@ecibimos el elemento can#as #ar elemento 3 document.%etElement7'6d2Mmican#asM4N LLBomprobaci$n sobre si encontramos un elemento LL' podemos e traer su conte to con %etBonte t24, "ue indica compatibilidad con can#as if 2elemento EE elemento.%etBonte t4 O LL*ccedo al conte to de M1dM de este can#as, necesario para dibu&ar #ar conte to 3 elemento.%etBonte t2M1dM4N if 2conte to4 O LL9i ten%o el conte to 1d es "ue todo +a ido bien ' puedo empe!ar a dibu&ar en el can#as LLBomien!o dibu&ando un rect)n%ulo conte to.fill@ect2<, <, .5<, .<<4N LLcambio el color de estilo de dibu&o a ro&o conte to.fill9t'le 3 MPcc<<<<MN LLdibu&o otro rect)n%ulo conte to.fill@ect2.<, .<, .<<, Q<4N R R R JLscriptK JL+eadK Jbod'K Jcan#as id3"mican#as" widt+3"1<<" +ei%+t3".<<"K Este te to se muestra para los na#e%adores no compatibles con can#as. JbrK 5or fa#or, utili!a Cirefo , B+rome, 9afari u /pera. JLcan#asK

JLbod'K JL+tmlK 5odemos #er el e&emplo en marc+a en una p)%ina aparte.

Entender el lien%o de canvas

9e%uimos dando nuestros primeros pasos en el elemento can#as del HTML 5. @ecordemos "ue en el anterior artculo #imos un primer e&emplo de dibu&o en un can#as, as "ue 'a tenemos una idea de las partes "ue inte%ran el proceso para +acer un dibu&o en el can#as: Bolocar la eti"ueta B*0G*9 en el cuerpo de la p)%ina Dibu&ar en el can#as utili!ando un script en Ia#ascript En este artculo #amos a e plicar las caractersticas de nuestro lien!o ' las coordenadas con las "ue podemos mo#ernos por (l ' reali!ar dibu&os.

E,e de coordenadas del canvas

5ara posicionar elementos en el can#as tenemos "ue tener en cuenta su e&e de coordenadas en dos dimensiones, "ue comien!a en la es"uina superior i!"uierda del lien!o. El lien!o producido por can#as tendr) unas dimensiones indicadas con los atributos widt+ ' +ei%+t en la eti"ueta B*0G*9. 5or tanto, la es"uina superior i!"uierda ser) el punto 2<,<4 ' la es"uina inferior derec+a el punto definido por 2widt+S.,+ei%+tS.4, osea, el punto m) imo de coordenadas marcado por su anc+ura ' altura. 'ota- Hemos indicado "ue el punto de la es"uina inferior derec+a es 2widt+S.,+ei%+tS.4 por"ue las coordenadas comien!an en 2<,<4, lue%o la coordenada final en anc+ura ' altura ser) . menos el tama8o m) imo de widt+ ' +ei%+t definido en la eti"ueta B*0G*9. 5or e&emplo, si la anc+ura es 5< ' la altura es .<<, entonces las coordenadas #an desde 2<,<4 +asta 2,T,TT4. 5odemos #er el si%uiente dia%rama para tener una idea e acta de las dimensiones ' coordenadas en un can#as.

Bual"uier punto dentro del can#as se calcula con la coordenada 2 ,'4, siendo "ue la crece se%:n los pi el a la derec+a ' la ' con los pi el +acia aba&o. 5ara dibu&ar cual"uier tipo de forma en el can#as necesitaremos posicionarla con respecto a las coordenadas "ue acabamos de #er. En el e&emplo del artculo anterior, #imos "ue para dibu&ar un rect)n%ulo necesitamos #arios #alores: conte to.fill@ect2.<, .<, .<<, Q<4N Los dos primeros par)metros eran las coordenadas e ' de la es"uina superior i!"uierda del rect)n%ulo. Los dos :ltimos par)metros son los #alores de anc+ura ' altura del mismo. 5ero +a' otras formas "ue se pueden dibu&ar en un can#as "ue re"uieren el uso de m(todos con un poco m)s elaborados "ue el dibu&o de un rect)n%ulo. Lo #eremos m)s adelante.

2e0undo e,e+plo de traba,o con canvas

5ara se%uir familiari!)ndonos con el elemento can#as ' el procedimiento de dibu&o mediante Ia#ascript #amos a #er un se%undo e&emplo, tambi(n sencillo. Gimos "ue parte del c$di%o Ia#ascript necesario era para reali!ar las comprobaciones pertinentes a fin de ase%urarnos "ue el na#e%ador es compatible con can#as cuando "ueremos e traer el conte to del can#as antes de empe!ar a dibu&ar. En este e&emplo reali!aremos una funci$n para resumir estas tareas "ue podremos utili!ar a lo lar%o de este manual. LL@ecibe un identificador del elemento can#as ' car%a el can#as LLDe#ue#e el conte to del can#as o C*L9E si no +a podido conse%uise

function car%aBonte toBan#as2idBan#as4O #ar elemento 3 document.%etElement7'6d2idBan#as4N if2elemento EE elemento.%etBonte t4O #ar conte to 3 elemento.%etBonte t2M1dM4N if2conte to4O return conte toN R R return C*L9EN R 5odremos in#ocar esta funci$n ' e#aluar su resultado para saber si se obtu#o o no el conte to del can#as. #ar conte to 3 car%aBonte toBan#as2Mmican#asM4N if2conte to4O LLTen%o el conte to, entonces dibu&o sobre el can#as R En este e&emplo #amos a dibu&ar un par de rect)n%ulos, uno a!ul ' otro amarillo. Ua #imos en el anterior e&emplo c$mo se +acan formas rectan%ulares ' tambi(n aprendimos a cambiar el color de la forma. 5ara mostrar otra de las posibilidades del can#as #amos a mostrar c$mo +acer un color semitransparente. LLcambio el color de dibu&o a a!ul conte to.fill9t'le 3 MPVVVVffMN LLdibu&o un rect)n%ulo a!ul conte to.fill@ect2.<,.<,5<,5<4N LLcambio el color a amarillo con un poco de transparencia conte to.fill9t'le 3 Mr%ba2155,155,<,<.Q4MN LLpinto un rect)n%ulo amarillo semitransparente conte to.fill@ect2H5,H5,5<,5<4N 9i nos fi&amos, cuando se cambi$ el color a amarillo se especific$ el color con @;7*, esto si%nifica "ue estamos indicando tambi(n el canal *lp+a, "ue indica el %rado de transparencia desde < 2totalmente transparente4 a . 2totalmente opaco4. *clarmos de cual"uier forma "ue todas estas funciones de dibu&o las e plicaremos con detenimiento m)s adelante. El c$di%o completo de este se%undo e&emplo se puede #er a continuaci$n: J+tmlK J+eadK JtitleKBan#as se%undo e&emploJLtitleK

JscriptK LL@ecibe un identificador del elemento can#as ' car%a el can#as LLDe#ue#e el conte to del can#as o C*L9E si no +a podido conse%uise function car%aBonte toBan#as2idBan#as4O #ar elemento 3 document.%etElement7'6d2idBan#as4N if2elemento EE elemento.%etBonte t4O #ar conte to 3 elemento.%etBonte t2M1dM4N if2conte to4O return conte toN R R return C*L9EN R window.onload 3 function24O LL@ecibimos el elemento can#as #ar conte to 3 car%aBonte toBan#as2Mmican#asM4N if2conte to4O LL9i ten%o el conte to LLcambio el color de dibu&o a a!ul conte to.fill9t'le 3 MPVVVVffMN LLdibu&o un rect)n%ulo a!ul conte to.fill@ect2.<,.<,5<,5<4N LLcambio el color a amarillo con un poco de transparencia conte to.fill9t'le 3 Mr%ba2155,155,<,<.Q4MN LLpinto un rect)n%ulo amarillo semitransparente conte to.fill@ect2H5,H5,5<,5<4N R R JLscriptK JL+eadK Jbod'K Jcan#as id3"mican#as" widt+3".<<" +ei%+t3".<<"K Tu na#e%ador no soporta can#as. JLcan#asK

JLbod'K JL+tmlK El e&emplo puede #erse en marc+a en una p)%ina aparte, pero tener en cuenta "ue +ace falta disponer de compatibilidad con can#as en #uestro na#e%ador.

3ibu,ar rectn0ulos en un Canvas

Ban#as es uno de los nue#os elementos disponibles en HTML 5, "ue sir#e para dibu&ar cosas en un lien!o de la p)%ina. Ua e plicamos este nue#o componente en anteriores artculos de DesarrolloWeb.com, entre los "ue destacamos la 6ntroducci$n a Ban#as del HTML 5. Bomo 'a se e plic$ anteriormente, can#as es un elemento sobre el "ue dibu&amos por medio de sentencias en el len%ua&e de pro%ramaci$n Ia#ascript. 9in embar%o, por el momento todos los na#e%adores no son compatibles con este nue#o componente, por lo "ue tendremos "ue +acer comprobaciones para no e&ecutar en los na#e%adores nin%una instrucci$n "ue pueda dar errores por problemas de compatibilidad. Esto tambi(n se e plic$ en el artculo E&emplo de dibu&o con el *56 de can#as ' adem)s se profundi!$ un poco en anterior artculo a este, cu'a lectura tambi(n recomendamos, Entender el lien!o de can#as. En este artculo #amos a e plicar c$mo podemos utili!ar las funciones fill@ect24 ' stroDe@ect24 para dibu&ar rect)n%ulos en la p)%ina ' adem)s #amos a implementar una pe"ue8a interacci$n por medio de un enlace, "ue al pulsarlo e&ecutar) una funci$n Ia#ascript para borrar el contenido del can#as con la funci$n clear@ect24.

*unci&n fill4ect56
Esta funci$n, perteneciente al ob&eto conte to de un elemento can#as, sir#e para dibu&ar rect)n%ulos rellenos de color. @ecibe cuatro par)metros, con este es"uema: fill@ect2 ,',anc+ura,altura4 Esto dibu&a un rect)n%ulo cu'a es"uina superior i!"uierda est) en el punto 2 ,'4 ' cu'as dimensiones son altura anc+ura. El color de relleno no lo especificamos en la propia funci$n, sino "ue es el color "ue se ten%a confi%urado en ese momento como color de relleno, "ue se indica con la propiedad fill9t'le del conte to del can#as, asi%nando por e&emplo el @;7 de un color. 'ota-Bomo #imos en el artculo Entender el lien!o de can#as, antes de e&ecutar este m(todo, necesitamos acceder al conte to de un can#as, para lue%o in#ocar al m(todo sobre ese ob&eto. Esto lo #amos a dar por sabido a"u, ' recomendamos la lectura del se8alado artculo para las personas "ue ten%an dudas. 5or e&emplo, #eamos el si%uiente c$di%o:

for 2i3<NiJ3.<<NiW3.<4O conte to.fill@ect2i,i,5,54N R Esto dibu&ara una serie de rect)n%ulos, comen!ando en la posici$n 2<,<4 ' continuando con posiciones siempre de .< p eles de distancia en ambas coordenadas: 2.<,.<4, 21<,1<4 ... *cabando en la coordenada 2.<<,.<<4. Todos los rect)n%ulos ser)n de 5 p eles de alto ' anc+o, lue%o realmente son cuadrados.

*unci&n stro e4ect56

Esta funci$n sir#e para dibu&ar simplemente la silueta de un rect)n%ulo, es decir, s$lo su borde. El es"uema de par)metros es el si%uiente: stroDe@ect2 ,',anc+ura,altura4 Dibu&a el borde de un rect)n%ulo comen!ando en la posici$n 2 ,'4 para su es"uina superior i!"uierda ' con las dimensiones de altura anc+ura. for 2i3.<<NiK3<NiS3.<4O conte to.stroDe@ect2i,.<<Si,5,54N R Bon el c$di%o anterior tambi(n dibu&amos una serie de cuadrados en el can#as, aun"ue en esta ocasi$n s$lo la silueta sin estar rellenos de color, de 5 p eles de anc+ura ' altura ' con distintas coordenadas "ue producimos al +acer el bucle for. De manera similar, para definir el color del borde del rect)n%ulo, utili!amos la propiedad stroDe9t'le del ob&eto del conte to del can#as, a la "ue podemos asi%nar el #alor @;7 "ue deseemos para el borde de los cuadrados o a"uello "ue #a'amos a dibu&ar en el can#as.

*unci&n clear4ect56
Esta funci$n nos sir#e para borrar )reas rectan%ulares de un can#as ' +acerlas totalmente transparentes o sin contenido %r)fico. Cunciona de manera similar a los rect)n%ulos: clear@ect2 ,',anc+ura,altura4 El color a"u no importa muc+o, por"ue es simplemente el color del fondo del contenedor HTML donde +a'amos colocado el can#as.

E,e+plo de creaci&n de rectn0ulos en canvas

*+ora #eamos un e&emplo de dibu&o de rect)n%ulos en un can#as, "ue utili!a las funciones comentadas anteriormente. J+tmlK J+eadK

JtitleKBan#as rect)n%ulosJLtitleK JscriptK LL@ecibe un identificador del elemento can#as ' car%a el can#as LLDe#ue#e el conte to del can#as o C*L9E si no +a podido conse%uise function car%aBonte toBan#as2idBan#as4O #ar elemento 3 document.%etElement7'6d2idBan#as4N if2elemento EE elemento.%etBonte t4O #ar conte to 3 elemento.%etBonte t2M1dM4N if2conte to4O return conte toN R R return C*L9EN R window.onload 3 function24O LL@ecibimos el elemento can#as #ar conte to 3 car%aBonte toBan#as2Mmican#asM4N if2conte to4O LL9i ten%o el conte to LLcambio el color de relleno de los rect)n%ulos conte to.fill9t'le 3 MPcc<<<<MN for 2i3<NiJ3.<<NiW3.<4O LL fill@ect2 ,',widt+,+ei%+t4 dibu&a un rect)n%ulo relleno de color conte to.fill@ect2i,i,5,54N R LLcambio el color de la lnea de borde del rect)n%ulo conte to.stroDe9t'le 3 MPffTTHHMN for 2i3.<<NiK3<NiS3.<4O LLstroDe@ect2 ,',widt+,+ei%+t4 dibu&a el borde de un rect)n%ulo conte to.stroDe@ect2i,.<<Si,5,54N R R R function borrarXparcial24O #ar conte to 3 car%aBonte toBan#as2Mmican#asM4N if2conte to4O LLclear@ect2 ,',widt+,+ei%+t4 borra un )rea rectan%ular del can#as de&)ndola transparente conte to.clear@ect2V<,<,,1,.5<4N R

R JLscriptK JL+eadK Jbod' b%color3"PffffTT"K Jcan#as id3"mican#as" widt+3".5<" +ei%+t3".5<"K Bontenido "ue s$lo #er)n los usuarios "ue no soportan can#as en su na#e%ador. Fsa una #ersi$n moderna de Cirefo , B+rome, 9afari, /pera... casi todos los na#e%adores e cepto E plorer son compatibles con Ban#as. JLcan#asK Ja +ref3"P" onclicD3"borrarXparcial24"K7orrado parcialJLaK JLbod'K JL+tmlK La funci$n car%aBonte toBan#as24 'a la e plicamos en el anterior artculo ' la utili!amos para obtener el ob&eto de conte to del can#as, o false en caso "ue el na#e%ador no soporte el traba&o con can#as del HTML 5. 'ota- 6nternet E plorer, al menos +asta la #ersi$n A no soporta can#as, lue%o no ser) compatible con este e&emplo. En el e#ento window.onload definimos una serie de instrucciones "ue dibu&ar)n una serie de rect)n%ulos &usto cuando la p)%ina +a'a terminado de car%arse. Bon la funci$n borrarXparcial24 simplemente borramos un )rea del can#as ' a esta funci$n se llama por medio del e#ento onclicD del enlace "ue +a' en la parte de aba&o del c$di%o. 5odemos #er el e&emplo en marc+a en una p)%ina aparte. Esperamos "ue con estas indicaciones ' el anterior e&emplo se +a'a podido entender correctamente el modo de dibu&ar rect)n%ulos en un elemento Ban#as del HTML 5. En futuros artculos #eremos c$mo dibu&ar otros tipos de formas. >ui!)s lo m)s complicado para desarrolladores sin e periencia sea la necesidad de traba&ar con el len%ua&e de pro%ramaci$n Ia#ascript, pero recordamos "ue en DesarrolloWeb.com puedes encontrar una serie de manuales de Ia#ascript "ue est)n incluso al alcance de personas "ue no +a'an pro%ramado nunca.

Traba,ando con color de relleno / de tra%ado en canvas

Estamos aprendiendo acerca del elemento Ban#as del HTML 5 ' #amos a presentar un artculo "ue nos ser#ir) para darle un to"ue personal a nuestros dise8os utili!ando un poco de color. En el anterior artculo del Manual de Ban#as del HTML 5 'a #imos un par de funciones para dibu&o de rect)n%ulos ' a+ora #amos a estudiar un poco me&or cu)les son las posibilidades para darles color. De paso, este par de e&emplos ser#ir)n para ilustrar un poco me&or el es"uema de traba&o con can#as. 5ara traba&ar con color en los elementos can#as tenemos #arias posibilidades, pero de momento #amos a aprender a modificar el color con el "ue se rellena o se dibu&a tra!ados. Bomo #imos anteriormente, al dibu&ar rect)n%ulos, podemos ele%ir entre dibu&ar s$lo su contorno o dibu&arlos rellenos de color 2' lue%o #eremos "ue esto es as con otros tipos de caminos4. *+ora #eremos "ue e isten dos atributos del conte to del can#as "ue sir#en para definir el color de relleno ' el color de tra!ado a la +ora de dibu&ar rect)n%ulos u otros caminos.

Ca+biar el color de relleno con fill2t/le

E iste un atributo del conte to del can#as "ue almacena el color "ue se utili!ar) al rellenar elementos. Bambiar el color de relleno es tan sencillo como asi%narle #alores distintos, de colores en @;7, con lo "ue conse%uiremos "ue la pr$ ima #e! "ue se rellene de color se +a%a con ese nue#o #alor asi%nado. ct .fill9t'le 3 MPTT<<<<MN 9uponiendo "ue tenemos el ob&eto conte to de un can#as en la #ariable ct , con la anterior lnea estamos solicitando al elemento can#as "ue la pr$ ima #e! "ue se rellene el color se +a%a en ro&o oscuro.

Ca+biar el color de tra%ado con stro e2t/le

*+ora bien, cuando dibu&amos podemos ele%ir +acer s$lo un tra!ado del rect)n%ulo, u otro tipo de camino ' para ello se utili!ar) otro color "ue podemos definir con stroDe9t'le. El atributo stroDe9t'le funciona de la misma manera "ue fill9t'le, pero con la sal#edad "ue ser#ir) para indicar el color del tra!ado. ct .stroDe9t'le 3 MP<<<<TTMN Bon esa lnea estamos marcando "ue el color de tra!ado sea a!ul oscuro. 5or lo cual, la pr$ ima #e! "ue se +a%a un tra!ado la lnea ser) de ese color.

#tras notaciones para definir colores en canvas

*+ora podemos aprender c$mo especificar colores en los elementos can#as. La #erdad es "ue los "ue cono!can B99 no tendr)n problema al%uno para ello, 'a "ue los formatos son e actamente los mismos. 5or e&emplo, podremos utili!ar estas notaciones.

Bolor con nombre: "blue" Bolor con @;7 +e adecimal, como se define en HTML: "PffVV<<"

Bolor con @;7 en base decimal: "r%b2.<<, 15, 1<V4" Bolor @;7* 2canal alp+a o transparencia, como en B99H4: "r%ba2155, .15, <, <.54" Bon @;7 ' porcenta&e: "r%b2.<<Y, 1<Y, <4" 0osotros podremos ele%ir la "ue m)s nos con#en%a se%:n nuestro caso.

E,e+plo para ca+biar el color de relleno

Geamos a+ora un e&ercicio "ue nos sir#e de e&emplo para mostrar c$mo cambiar el color de relleno. En concreto #amos a rellenar el can#as con muc+os cuadraditos de colores aleatorios ' adem)s +aremos "ue cada pocos instantes se #uel#a a dibu&ar el can#as con nue#os cuadraditos aleatorios, con lo "ue %eneraremos nuestra primera ' pe"ue8a animaci$n. 9i lo deseas, antes de continuar la lectura, puede ser interesante #er el e&emplo en marc+a. Geamos antes "ue nada un par de funciones para conse%uir un color aleatorio en Ia#ascript. La primera nos ofrece un n:mero aleatorio ' la se%unda, "ue se apo'a en la primera, nos sir#e para %enerar una cadena "ue especifica un color. function aleatorio2inferior,superior4O num5osibilidades 3 superior S inferior aleat 3 Mat+.random24 Z num5osibilidades aleat 3 Mat+.floor2aleat4 return parse6nt2inferior4 W aleat R function color*leatorio24O return "r%b2" W aleatorio2<,1554 W "," W aleatorio2<,1554 W "," W aleatorio2<,1554 W "4"N R *+ora #amos a mostrar otra funci$n para dibu&ar el lien!o de un can#as, rellenando de cuadraditos con colores aleatorios: function cuadrados*leatorios24O for2i3<N iJH<<N iW3.<4O for2&3<N &J15<N &W3.<4O conte to.fill9t'le 3 color*leatorio24N conte to.fill@ect2i,&,.<,.<4 R R R Bomo se puede #er, tenemos un bucle anidado, "ue reali!a la tarea. En cada iteraci$n se obtiene un color aleatorio ' lue%o se pinta un rect)n%ulo con ese color. La funci$n utili!a una #ariable %lobal llamada "conte to", "ue es el conte to del can#as sobre el "ue estamos dibu&ando.

*+ora para acabar #amos a #er la funci$n "ue se encar%ar) de iniciali!ar el conte to del can#as ' definir la e&ecuci$n peri$dica de la funci$n cuadrados*leatorios24 para %enerar la animaci$n. LL#ariable %lobal conte to sin iniciali!ar #ar conte toN window.onload 3 function24O LL@ecibimos el elemento can#as conte to 3 car%aBonte toBan#as2Mmican#asM4N if2conte to4O LL9i ten%o el conte to, defino la funci$n peri$dica set6nter#al2"cuadrados*leatorios2conte to4", 1<<4N R R Todo esto &unto +ace "ue consi%amos una animaci$n en el can#as, pues se in#oca a la funci$n cuadrados*leatorios24 cada 1<< milise%undos, lo "ue %enera dibu&os aleatorios distintos cada poco tiempo. *+ora podemos #er el e&emplo en marc+a en una p)%ina aparte.

E,e+plo para ca+biar el color del tra%ado

Hemos +ec+o el e&emplo anterior con una li%era modificaci$n. En este se%undo caso, en lu%ar de rellenar los rect)n%ulos de color, #amos a dibu&ar s$lo el tra!ado. 5or supuesto, en cada paso del bucle se cambiar) el color de tra!ado, en lu%ar del color de relleno. *dem)s, los rect)n%ulos cu'o tra!ado estamos dibu&ando ser)n un poco menor. La :nica funci$n "ue tiene cambios con respecto al e&emplo anterior es cuadrados*leatorios24: function cuadrados*leatorios24O for2i3<N iJH<<N iW3.<4O for2&3<N &J15<N &W3.<4O conte to.stroDe9t'le 3 color*leatorio24N conte to.stroDe@ect2i,&,5,54 R R R El e&emplo cambiando esta funci$n se puede #er en una p)%ina aparte.

Ca+inos en Canvas del HTML 5

El Ban#as es uno de los elementos m)s no#edosos del HTML 5, "ue 'a comen!amos a e plicar en el artculo de 6ntroducci$n a Ban#as. En anteriores artculos #imos e&emplos sobre di#ersos dibu&os

en un elemento can#as, como los rect)n%ulos. *+ora #amos a continuar aprendiendo c$mo dibu&ar estructuras di#ersas por medio de los caminos. En can#as e isten di#ersas funciones "ue nos pueden ser#ir para dibu&ar siluetas a nuestro anto&o, "ue se tienen "ue utili!ar de manera complementaria. El proceso pasa por situarse en un punto del lien!o, lue%o definir cada uno de los puntos por los "ue pasa nuestro camino ' lue%o pintar de color dentro, o simplemente dibu&ar la lnea "ue pasara por todos esos puntos. En este artculo #eremos c$mo rellenar de color todo el )rea "ue "ueda definida por un camino. Geamos para empe!ar un resumen de al%unas de las funciones disponibles para +acer caminos, las "ue "ue utili!aremos durante el presente artculo.

*unci&n be0in(at.56
Esta funci$n sir#e para decirle al conte to del can#as "ue #amos a empe!ar a dibu&ar un camino. 0o tiene nin%:n par)metro ' por si sola no +ace nin%una acci$n #isible en el can#as. Fna #e! in#ocada la funci$n podremos empe!ar a dibu&ar el camino a8adiendo se%mentos para completarlo con las diferentes funciones de caminos. 'ota- Las funciones be%in5at+24 ' si%uientes en realidad son m(todos del ob&eto de conte to del can#as. Este ob&eto "ue mantiene el conte to del can#as lo tenemos "ue e traer nosotros por medio de Ia#ascript, a partir del elemento can#as donde deseemos dibu&ar. B$mo traba&ar ' e traer el conte to de un can#as fue 'a e plicado en el artculo E&emplo de dibu&o con el *56 de can#as. 9e%:n las pruebas reali!adas, podramos iniciar un camino sin utili!ar antes be%in5at+24, puesto "ue el efecto a primera #ista es el mismo "ue si no lo in#ocamos 2entiendo "ue el na#e%ador lo in#oca por nosotros al empe!ar a utili!ar funciones de caminos en can#as4. 0o obstante, debe ser recomendable +acer las cosas correctamente e in#ocarlo antes de comen!ar un camino.

*unci&n +oveTo56
9ir#e para mo#er el puntero ima%inario donde comen!aremos a +acer el camino. Esta funci$n no dibu&a nada en si, pero nos permite definir el primer punto de un camino. Llamar esta funci$n es como si le#ant)semos el l)pi! del lien!o ' lo traslad)semos, sin pintar, a otra posici$n. @ecibe como par)metro los puntos e ' donde +a de mo#erse el puntero para dibu&o. 5ara saber cu)l es el punto donde deseamos mo#ernos 2 ,'4, @ecordar "ue el e&e de coordenadas del can#as es la es"uina superior i!"uierda.

*unci&n lineTo56
Esta funci$n pro#oca "ue se dibu&e una lnea recta, desde la posici$n actual del puntero de dibu&o, +asta el punto 2 ,'4 "ue se indi"ue como par)metro. El m(todo lineTo24, por tanto es como si pos)ramos el l)pi! sobre el lien!o en la posici$n actual ' arrastr)semos, dibu&ando una lnea recta, +asta el punto donde se defini$ al in#ocar el m(todo.

La posici$n actual del camino la podemos +aber indicado pre#iamente con un mo#eTo24, o donde +a'amos terminado una lnea dibu&ada anteriormente. 9i no se indic$ antes una posici$n de nuestro puntero de dibu&o, lineTo24 no dibu&a nin%una lnea, sino "ue se tendr) en cuenta las coordenadas en#iadas como par)metro para posicionar tan solo el puntero de dibu&o all. Dic+o de otra manera, si no se di&o d$nde empe!ar el dibu&o, o no se +a dibu&ado nin%:n otro se%mento en el camino anteriormente, lineTo24 ser) e"ui#alente a mo#eTo24.

*unci&n fill56
Este m(todo del conte to del can#as sir#e para rellenar de color el )rea circunscrita por un camino. 5ara rellenar de color un camino, el camino tendra "ue estar cerrado, por lo "ue, si no lo est), autom)ticamente se cerrar) con una lnea recta +asta el primer punto del camino, es decir, donde comen!amos a dibu&ar. 9in embar%o, si durante los distintos se%mentos del camino nos de&amos al%:n se%mento abierto, no se pintar) nada. Bomo decimos, si no lle%amos a cerrar el camino, el m(todo fill24 lo cerrar) por nosotros, pero podramos utili!ar e plcitamente el m(todo close5at+24 para +acerlo nosotros 2close5at+24 lo e plicaremos en futuros artculos4.

E,e+plo de ca+ino sencillo

Bon las funciones #istas +asta el momento 'a podemos +acer unas primeras pruebas de caminos en can#as. *+ora #amos #er como podramos reali!ar un rombo en el can#as, relleno de color. ct ct ct ct ct ct .be%in5at+24N .mo#eTo25<,54N .lineTo2Q5,V54N .lineTo25<,.154N .lineTo215,V54N .fill24N

Bomo se puede #er, iniciamos un camino con be%in5at+24. Lue%o +acemos un mo#eTo24 para indicar el punto donde comen!ar el camino. 5osteriormente dibu&amos #arias lneas a di#ersos puntos del can#as, para acabar in#ocando al m(todo fill24, con lo "ue rellenaremos de color el camino. Ci&arse "ue el camino no se +aba lle%ado a cerrar. 5or lo "ue fill24 lo cerrar) por nosotros con una lnea al primer punto donde comen!amos el dibu&o. 'ota- 5ara e&ecutar estas lneas de c$di%o necesitaremos una instancia del ob&eto conte to del can#as, para in#ocar todos los m(todos sobre (l. El ob&eto del can#as lo tenemos en la #ariable "ct " en el c$di%o del e&emplo. En el c$di%o completo del e&ercicio podremos #er la funci$n "ue se podra utili!ar para obtener el conte to.

C&di0o co+pleto del e,e+plo de ca+ino

* continuaci$n podemos encontrar el c$di%o completo de este e&emplo de construcci$n de un camino con el elemento Ban#as del HTML 5. J+tmlK J+eadK JtitleKBan#as BaminosJLtitleK JscriptK LLLa 'a conocida funci$n para car%ar el conte to de un can#as function car%aBonte toBan#as2idBan#as4O #ar elemento 3 document.%etElement7'6d2idBan#as4N if2elemento EE elemento.%etBonte t4O #ar conte to 3 elemento.%etBonte t2M1dM4N if2conte to4O return conte toN R R return C*L9EN R window.onload 3 function24O LL@ecibimos el elemento can#as #ar ct 3 car%aBonte toBan#as2Mmican#asM4N if2ct 4O ct .be%in5at+24N ct .mo#eTo25<,54N ct .lineTo2Q5,V54N ct .lineTo25<,.154N ct .lineTo215,V54N ct .fill24N R R JLscriptK JL+eadK Jbod'K Jcan#as id3"mican#as" widt+3".5<" +ei%+t3".5<"K *ccede a este script con un na#e%ador "ue acepte can#as del HTML 5 JLcan#asK JLbod'K JL+tmlK

5ara acabar, podemos #er el e&emplo en marc+a en una p)%ina aparte.

E,e+plo 7 de dibu,o de ca+inos en canvas

El elemento can#as es un lien!o donde podemos dibu&ar directamente con funciones Ia#ascript, "ue tiene 'a aplicaciones infinitas en el desarrollo de webs. Estamos e plicando acerca de este elemento en el Manual de Ban#as del HTML 5 ' en el presente artculo #amos a se%uir +ablando del dibu&o caminos, #iendo dos nue#as funciones del *56 de Ban#as. Bon#iene no obstante se8alar "ue el tema sobre caminos en can#as lo empe!amos a e plicar en Baminos en Ban#as del HTML 5. En el presente artculo #eremos dos nue#as funciones :tiles en la creaci$n de caminos, "ue son close5at+24, para cerrar un camino ' stroDe24, para dibu&ar el camino reali!ado mediante una lnea. Las dos funciones, como cual"uier otra funci$n de dibu&o en el lien!o de can#as, son m(todos del ob&eto conte to del can#as, "ue se debe obtener a partir del elemento can#as con las correspondientes funciones de Ia#ascript, tal como #imos anteriormente en este manual. Geremos estas nue#as funciones para dibu&o de caminos con un e&emplo, pero antes podemos e plicarlas detalladamente.

*unci&n close(at.56
9ir#e para cerrar un camino, #ol#iendo a su punto inicial de dibu&o. @ecordemos "ue el camino tiene un punto inicial en el "ue nos situamos para comen!ar el dibu&o, con mo#eTo24. Lue%o #amos dibu&ando se%mentos en el camino por medio de lneas "ue nos lle#an a otros puntos del lien!o. 5ues close5at+24 sera como dibu&ar una lnea recta desde el punto donde se +a'a "uedado el camino al punto inicial donde empe!amos a construirlo. El m(todo close5at+24 no recibe nin%:n par)metro.

*unci&n stro e56

Bon el m(todo stroDe24 podemos dibu&ar una lnea por todo el recorrido del camino "ue +a'amos creado por medio de sus distintos se%mentos. Es similar al m(todo fill24, e plicado en el artculo anterior, con la diferencia "ue fill24 rellenaba de color ' stroDe24 tan solo dibu&a la silueta. *dem)s, en el caso de fill24 se necesitaba tener el camino cerrado, por lo "ue se cerraba autom)ticamente si no lo +abamos +ec+o ' stroDe24 realmente puede estar discontinuada, puesto "ue s$lo es una lnea lo "ue se dibu&a ' no un )rea.

E,e+plo de ca+ino con close(at.56 / stro e56

* continuaci$n #amos a reali!ar otro e&emplo de dibu&o con el *56 de can#as ' utili!ando funciones para la reali!aci$n de caminos. 5or complicarlo un poco, #amos a reali!ar el camino con un bucle, en el "ue en cada iteraci$n dibu&aremos un se%mento del camino. El resultado "ue #amos a obtener es una especie de perfil de una escalera. ct .be%in5at+24N ct .mo#eTo2.,.4N for 2i3.NiJ.<<NiW354O

if22iY14[3<4O ct .lineTo2iW5,i4N RelseO ct .lineTo2i,iW54N R R ct .lineTo2.,i4N ct .close5at+24N ct .stroDe24N 'ota-5rimero cabe ad#ertir de nue#o "ue para e&ecutar ese c$di%o necesitamos una #ariable "ue +emos llamado "ct " "ue contiene el conte to del can#as, "ue es sobre el "ue in#ocaremos los distintos m(todos para dibu&ar en el can#as. En el script comen!amos el camino con be%in5at+24, lue%o con mo#eTo2.,.4 nos situamos en el punto donde deseamos comen!ar el dibu&o. * continuaci$n reali!amos un bucle for para dibu&ar di#ersas lneas en di#ersas coordenadas. *cabamos +aciendo una :ltima lnea con lineTo24 ' despu(s un close5at+24 para "ue se dibu&e una lnea final +asta el punto de inicio del camino, "ue cerrar) la silueta reali!ada. Bon stroDe24 +acemos "ue se dibu&e una lnea pasando por todos los se%mentos "ue completan el camino dibu&ado. Este e&emplo podemos #erlo en una p)%ina aparte.

E,e+plo de lnea discontinua

9i +abemos obser#ado el e&emplo anterior en marc+a +abremos #isto "ue en realidad +a' dos e&emplos de can#as. El se%undo es i%ual "ue el primero, o casi i%ual, con la :nica diferencia "ue el camino no est) cerrado ' est) formado por una lnea discontinua. Esto se puede +acer perfectamente con stroDe24, pues para pintar lneas no es necesario "ue cierren completamente el camino. El dibu&o anterior lo +emos reali!ado con un c$di%o como el "ue si%ue: ct .be%in5at+24N ct .mo#eTo2.,.4N for 2i3.NiJ.<<NiW354O if22iY14[3<4O ct .lineTo2iW5,i4N RelseO ct .mo#eTo2i,iW54N R R ct .stroDe24N

E,e+plo co+pleto de dibu,o de lneas con ca+inos en canvas

5ara todos los interesados, colocamos a continuaci$n el c$di%o completo de este e&emplo. J+tmlK J+eadK JtitleKBan#as Baminos con stroDeJLtitleK JscriptK LL@ecibe un identificador del elemento can#as ' car%a el can#as LLDe#ue#e el conte to del can#as o C*L9E si no +a podido conse%uise function car%aBonte toBan#as2idBan#as4O #ar elemento 3 document.%etElement7'6d2idBan#as4N if2elemento EE elemento.%etBonte t4O #ar conte to 3 elemento.%etBonte t2M1dM4N if2conte to4O return conte toN R R return falseN R window.onload 3 function24O LL@ecibimos el elemento can#as #ar ct 3 car%aBonte toBan#as2Mmican#asM4N if2ct 4O ct .be%in5at+24N ct .mo#eTo2.,.4N for 2i3.NiJ.<<NiW354O if22iY14[3<4O ct .lineTo2iW5,i4N RelseO ct .lineTo2i,iW54N R R ct .lineTo2.,i4N ct .close5at+24N ct .stroDe24N R

LLotro e&emplo basado en el mismo c$di%o #ar ct 3 car%aBonte toBan#as2Mmican#as1M4N if2ct 4O

ct .be%in5at+24N ct .mo#eTo2.,.4N for 2i3.NiJ.<<NiW354O if22iY14[3<4O ct .lineTo2iW5,i4N RelseO ct .mo#eTo2i,iW54N R R ct .stroDe24N R R JLscriptK JL+eadK Jbod'K Jcan#as id3"mican#as" widt+3".5<" +ei%+t3".5<"K @ecicla tu browser, 5/@ C*G/@[[ JLcan#asK JbrK JbrK Jcan#as id3"mican#as1" widt+3".5<" +ei%+t3".5<"K 5/@ C*G/@, @ecicla tu na#e%ador[[ JLcan#asK JLbod'K JL+tmlK 5odemos acceder a una p)%ina con el e&emplo en funcionamiento.

Ca+inos en canvas- e,e+plo 8

>ui!)s nos estemos poniendo un poco repetiti#os con los caminos en Ban#as, pero es "ue el tema es suficientemente importante como para publicar #arios artculos. Bomo los propios lectores de DesarrolloWeb.com dicen, nunca est) de m)s poner #arios e&emplos "ue a'uden un poco m)s a asimilar los conocimientos brindados en los manuales.

En artculos anteriores 'a e plicamos c$mo +acer caminos en can#as del HTML 5 esta ocasi$n #amos a dedicarnos a dibu&ar el mismo camino, "ue es un simple +e )%ono, pero con distintas #ariantes, para "ue las personas puedan #er las diferencias entre cerrar o no los caminos, as como rellenarlos de color. En el presente artculo #eremos las si%uientes #ariantes de un camino con la forma de +e )%ono re%ular: .. 1. H. ,. Bamino relleno de color ' con el cierre de camino no e plcito. Bamino relleno de otro color ' con el cierre de camino e plcito por medio de close5at+24. Bamino sin relleno de color, s$lo la lnea, ' sin cierre de camino Bamino sin relleno de color, s$lo la lnea de la silueta ' con cierre de camino e plcito.

@ealmente es un mismo e&ercicio con #arias #ariantes "ue esperamos pueda darnos al%una pista adicional sobre el dibu&o en el elemento can#as del HTML 5. 5odemos #er una ima%en con los cuatro e&emplos de caminos "ue +aremos a continuaci$n:

9:; Ca+ino relleno sin cierre e<plcito

Este primer e&emplo de dibu&o en un can#as crear) un camino con forma de rect)n%ulo "ue tendr) un relleno de color. En este caso el el camino no est) cerrado, pero #eremos "ue da un poco i%ual en este caso. 5ara rellenar de color un camino utili!amos la el m(todo fill24 del conte to del can#as, "ue antes de rellenar de color +ace un cierre autom)tico del camino. De esta manera, aun"ue no se +a'a completado el camino +asta cerrarlo, al in#ocar ct .fill24 esta funci$n lo cerrar) por nosotros. LLHe a%ono relleno de color, cierre de camino autom)tico con fill #ar ct 3 car%aBonte toBan#as2Mcan#as.M4N if2ct 4O ct .be%in5at+24N ct .mo#eTo25<,.54N ct .lineTo2..1,.54N ct .lineTo2.,H,VT4N ct .lineTo2..1,.1H4N ct .lineTo25<,.1H4N ct .lineTo2.T,VT4N

ct .fill24N R

7:; Ca+ino relleno con cierre e<plcito

En esta se%unda #ariante del camino del +e )%ono tenemos un camino "ue s +emos cerrado e plcitamente con el m(todo close5at+24. 9in embar%o, como fill24 'a se encar%aba de cerrar el camino por nosotros autom)ticamente, no e iste diferencia entre ese camino ' el anterior. Es decir, para el caso de caminos con color de relleno, es indiferente si el camino est) o no cerrado, pues se cerrar) autom)ticamente para poder rellenarse de color. 0o obstante, para adornar un poco m)s el e&emplo, +emos optado por cambiar el color de relleno del +e )%ono, por medio de la propiedad fill9t'le del ob&eto conte to del can#as. LLHe a%ono rellenado, cierre de camino e plcito con close5at+ #ar ct 3 car%aBonte toBan#as2Mcan#as1M4N if2ct 4O ct .fill9t'le 3 MPTT<<<<MN ct .be%in5at+24N ct .mo#eTo25<,.54N ct .lineTo2..1,.54N ct .lineTo2.,H,VT4N ct .lineTo2..1,.1H4N ct .lineTo25<,.1H4N ct .lineTo2.T,VT4N ct .close5at+24N ct .fill24N R

8:; Ca+ino sin relleno / sin cierre

*+ora retomemos los caminos reali!ados s$lo con una lnea, sin rellenar de color, "ue 'a #imos en el artculo anterior. Gendr) bien para #er las diferencias entre los caminos "ue tienen el color de relleno. Bomo #eremos, el camino es e actamente i%ual "ue los anteriores, con la diferencia "ue para dibu&ar s$lo la lnea del contorno del camino se utili!a el m(todo stroDe24 del ob&eto conte to de can#as, en lu%ar de usar fill24 "ue +ace los caminos con relleno de color. *dem)s, podremos obser#ar como al usar el m(todo stroDe24 no se cierra autom)ticamente el camino como ocurra con fill24, sino "ue se "ueda abierto. LLHe a%ono s$lo lnea, sin cierre de camino #ar ct 3 car%aBonte toBan#as2Mcan#asHM4N if2ct 4O ct .be%in5at+24N

ct ct ct ct ct ct ct R

.mo#eTo25<,.54N .lineTo2..1,.54N .lineTo2.,H,VT4N .lineTo2..1,.1H4N .lineTo25<,.1H4N .lineTo2.T,VT4N .stroDe24N

=:; Ca+ino sin relleno / con cierre

5ara acabar con estos e&emplos de dibu&o de +e )%onos en un can#as #amos a mostrar c$mo reali!ar un camino s$lo con la lnea del borde, como el anterior, pero con el cierre de camino "ue se consi%ue con close5at+24. El camino es el mismo, pero antes de llamar a stroDe24 para dibu&ar la lnea, +acemos un close5at+24 para cerrar el camino. 5ara a8adir al%:n inter(s adicional al camino, +emos utili!ado un color distinto para la lnea del contorno, "ue se consi%ue en esta ocasi$n con la propiedad stroDe9t'le del ob&eto conte to del can#as. LLHe a%ono s$lo lnea, con cierre de camino close5at+24 #ar ct 3 car%aBonte toBan#as2Mcan#as,M4N if2ct 4O ct .stroDe9t'le 3 MPTT<<<<MN ct .be%in5at+24N ct .mo#eTo25<,.54N ct .lineTo2..1,.54N ct .lineTo2.,H,VT4N ct .lineTo2..1,.1H4N ct .lineTo25<,.1H4N ct .lineTo2.T,VT4N ct .close5at+24N ct .stroDe24N R Hasta a"u lle%a esta pr)ctica de caminos en Ban#as del HTML 5, con distintas #ariantes a partir de los mismos puntos del camino. 9i lo deseas, puedes #er una p)%ina donde se muestran los cuatro e&emplos de caminos #istos en este artculo.

#tros e,e+plos de dibu,o de ca+inos en ele+entos Canvas

* lo lar%o del Manual del componente Ban#as del HTML 5 +emos #isto #arios e&emplos de dibu&o de caminos. 9i +emos se%uido los captulos anteriores de este manual 'a deberamos +aber co%ido un poco de pr)ctica al dibu&ar lneas "ue si%uen un camino, relleno de color o sin relleno. Lo cierto es "ue 'a podramos pasar a al%:n otro tema m)s adelantado, pero tenemos toda#a en el tintero un par de e&emplos con caminos "ue pueden ser interesantes para acabar de entender c$mo se crean. En el presente e&emplo estamos +aciendo #arios caminos en un mismo can#as ' adem)s, #amos a rellenar de colores distintos cada uno de los caminos, lo "ue nos #endr) bien para se%uir practicando. La idea de este artculo es "ue nos podamos familiari!ar un poco m)s con la pr)ctica de abrir caminos, cerrarlos ' #ol#er a abrir otros caminos. *dem)s, podemos #er "ue con un mismo camino tambi(n podemos pintar en dos partes distintas del lien!o, trasladando el puntero de dibu&o pero sin pintar.

(ri+er e,e+plo> pintar dos ca+inos distintos

Este primer e&emplo tendra el si%uiente c$di%o: #ar ct 3 car%aBonte toBan#as2Mmican#asM4N if2ct 4O LLprimer camino ct .be%in5at+24N ct .mo#eTo21<,.<4N ct .lineTo2H1,1<4N ct .lineTo211,1<4N ct .lineTo211,H54N ct .lineTo2.Q,H54N ct .lineTo2.Q,1<4N ct .lineTo2Q,1<4N LLct .close5at+24N opcional antes de un fill24 ct .fill24N LLcreo un se%undo camino ct .be%in5at+24N LLprobar a comentar esta lnea para #er lo "ue pasa ct .fill9t'le 3 MPffAA<<MN ct .mo#eTo2,Q,5<4N ct .lineTo2VQ,Q<4N ct .lineTo2VQ,H<4N ct .close5at+24N ct .fill24N R 'ota- Lo cierto es "ue este c$di%o est) incompleto, pues le falta la funci$n car%aBonte toBan#as24 "ue 'a se +a e plicado anteriormente en el artculo Entender el lien!o de can#as.

En ese c$di%o estamos reali!ando dos caminos distintos sobre un mismo can#as. El primer camino est) separado en el c$di%o del se%undo ' los dos comien!an con un be%in5at+24. En cada camino +acemos un mo#eTo24 para colocar el puntero de dibu&o en las coordenadas deseadas. Lue%o se +ace el close5at+24 para cerrar el camino, complet)ndolo con una lnea recta desde el :ltimo punto +asta el punto desde donde comen!amos el caminio. 5ero como se puede #er en e&emplo, la llamada al m(todo close5at+24 es opcional, pues estos dos caminos se rellenan de color con fill24 ' este m(todo re"uiere "ue el camino est( cerrado. 5or eso, si el camino no se cerr$ e plcitamente con close5at+24, con la llamada a fill24 se +ace implcitamente. /tra cosa interesante es el cambio de color "ue +acemos en el se%undo camino con la propiedad fill9t'le del ob&eto can#as, en la lnea: ct .fill9t'le 3 MPffAA<<MN El primer e&emplo se puede #er en marc+a en este enlace.

2e0undo e,e+plo> un ca+ino que pinta en dos lu0ares distintos

El se%undo e&emplo "ue nos "ueda por #er es mu' parecido al primero, con la diferencia "ue a+ora #amos a dibu&ar la silueta o contorno, en #e! de rellenarlos de color. *dem)s, en este se%undo e&emplo s$lo tenemos un camino en #e! de dos "ue +aba antes. Esto es por"ue +acemos s$lo un be%in5at+24 ' aun"ue cerremos el camino con close5at+24 ' lue%o +a%amos un mo#eTo24 para trasladar el puntero de dibu&o, en realidad s$lo tenemos un camino. Es por ello "ue, el cambio de color con la propiedad stroDe9t'le, aun"ue se +a%a en el medio del c$di%o, afecta a todo el tra!ado, pues es el mismo camino. #ar ct 3 car%aBonte toBan#as2Mmican#asM4N if2ct 4O ct .be%in5at+24N ct .mo#eTo21<,Q4N ct .lineTo2H1,1<4N ct .lineTo211,1<4N ct .lineTo211,H54N ct .lineTo2.Q,H54N ct .lineTo2.Q,1<4N ct .lineTo2Q,1<4N ct .close5at+24N LLcambio el color de la lnea, el color cambia para todo el tra!o ct .stroDe9t'le 3 MPffAA<<MN LLsi%o en el mismo camino, pero mue#o el puntero de dibu&o ct .mo#eTo2,Q,5<4N

ct ct ct ct R

.lineTo2VQ,Q<4N .lineTo2VQ,H<4N .close5at+24N .stroDe24N

El se%undo e&emplo en marc+a se puede #er tambi(n en una p)%ina aparte. Hemos de admitir "ue estos dos e&emplos no si%nifican un claro a#ance con respecto a lo "ue 'a +abamos relatado en el manual, pero nunca est) de m)s +acer e&emplos pr)cticos. *dem)s, +a' muc+as cosas "ue merece la pena practicar para entender bien c$mo se reali!an. En el si%uiente artculo e plicaremos nue#as t(cnicas para +acer lneas cur#as ' no s$lo lneas rectas como +asta a+ora.

Curvas en ca+inos de Canvas del HTML 5

Hasta a+ora en el manual de can#as del HTML 5 +emos aprendido a +acer caminos con lneas rectas, as "ue #amos a a#an!ar un poco m)s en la materia aprendiendo a dibu&ar caminos con cur#as. En principio las libreras de funciones para dibu&o en el can#as permite tres m(todos de para +acer tra!os en cur#a, basados en funciones matem)ticas para e presar cur#as de distintos tipos: !rcos0os permiten dibu&ar circunferencias o se%mentos de circunferencias, lo "ue se conoce como arcos. Lo conse%uimos con el m(todo arc24 en#iando una serie de par)metros "ue #eremos m)s adelante. Curvas cuadrticasEs una manera de especificar una cur#a en la "ue tenemos un punto de inicio, un punto de fin ' un tercer punto "ue indica +acia "u( parte se cur#ar) la lnea. Esta cur#a #eremos "ue es f)cil de entender ' "ue nos ser#ir) para +acer es"uinas redondeadas, entre otras muc+as cosas. Curvas Be%ierEs una manera matem)tica de e presar una cur#a por medio de cuatro puntos. El punto de inicio, el de fin ' dos puntos "ue indicar)n +acia d$nde se cur#ar) la primera ' se%unda mitad de la lnea. Es una cur#a un poco m)s comple&a de entender, pero posiblemente 'a +a'amos e perimentado con este tipo de cur#as en pro%ramas de dise8o como 5+otos+op o 6lustrator, lo "ue podr) a'udar un poco a comprenderla. La #erdad es "ue para +acer todas estas cur#as +a' "ue saber un poco de matem)ticas ' +abra "ue +acer c)lculos para poder a&ustarlas a nuestras necesidades. Di%amos "ue todas las f$rmulas est)n pensadas para el dibu&o t(cnico ' no artstico, por eso "ui!)s un matem)tico tendra m)s soltura "ue un artista para dibu&ar cosas en el lien!o del can#as. 0o obstante, no podemos de&ar "ue pensar "ue el dibu&o en can#as es un proceso informati!ado ' como estamos dise8ando a ni#el de len%ua&e de pro%ramaci$n, no "ueda otra cosa "ue adaptarse a las f$rmulas matem)ticas implementadas para +acer cur#as.

M)s adelante #eremos otras maneras de sol#entar estos temas, como la utili!aci$n de im)%enes, "ue podemos importar ' "pe%ar" en el can#as, a partir de arc+i#os %r)ficos creados con cual"uier pro%rama como 5+otos+op. En los si%uientes artculos #eremos con detalle cada uno de estos tres tipos de cur#as con sus e&emplos. 5odemos comen!ar conociendo las cur#as en arcos.

3ibu,o de curvas con arcos en canvas

En este artculo e plicaremos c$mo +acer caminos con arcos. Los arcos son se%mentos de circunferencias, o una circunferencia entera, en el caso de un arco completo. 9on uno de los modos de +acer cur#as en el elemento Ban#as del HTML 5. El m(todo "ue podemos dibu&ar para +acer un arco es arc24, "ue in#ocamos sobre el ob&eto el conte to del can#as. Este m(todo re"uiere unos cuantos par)metros para poder in#ocarlo ' especificar las caractersticas del arco "ue se desea +acer ' lo cierto es "ue no resulta del todo tri#ial por"ue +a' "ue conocer al%unas f$rmulas matem)ticas para el traba&o con circunferencias. *s "ue tendremos "ue refrescar al%unos conocimientos "ue pueden +aberse ol#idado del periodo de ense8an!a media. 'ota- 6%ual "ue los caminos, una #e! creados, podemos decidir si "ueremos rellenarlos de color, mediante el m(todo fill24 o bien dibu&ar solamente el contorno, con el m(todo stroDe24. Todas estas cosas sobre caminos ' dem)s se pueden aprender en el Manual del traba&o con Ban#as. Estos son los par)metros "ue debemos en#iar al m(todo arc24: arc2 , ', radio, an%uloXinicio, an%uloXfinal, sentidoXcontrarioXdelXrelo&4

Los par)metros , ' corresponden con las coordenadas del centro del arco. El par)metro radio es el n:mero de p eles "ue tiene el arco como radio. 5or su parte an%uloXinicio ' an%uloXfinal son los )n%ulos donde comien!a ' acaba el radio. Est)n tomados como si el e&e de la +ori!ontal tu#iese el )n%ulo cero. 9entidoXcontrarioXdelXrelo& es un par)metro boleano, donde true si%nifica "ue el tra!o #a desde un )n%ulo de inicio al de fin en el sentido contrario de las a%u&as del relo&. Calse indica "ue ese camino es en direcci$n contraria.

La #erdad es "ue todos los par)metros son bastante sencillos de entender, pero el )n%ulo de inicio ' fin no se indican en %rados, como podramos suponer, sino en radianes. 5ara el "ue no se acuerde, se puede +acer un paso de %rados a radianes atendiendo a la si%uiente f$rmula: @adianes 3 n:meroX56 2%radosL.A<4 5ara con#ertir %rados en radianes podramos utili!ar la si%uiente lnea de c$di%o Ia#ascript: #ar radians 3 2Mat+.56L.A<4Zde%rees 'ota- Mat+.56 es el famoso n:mero 56 2H..,.V4. En Ia#ascript, a partir de la clase Mat+, tenemos acceso a esa constante, as como di#ersas funcines matem)ticas. Ger las notas sobre la clase Mat+.

Entender los radianes

5ara comprender los %radianes de una manera m)s #isual, as como la referencia sobre el e&e -, "ue seran los cero %rados, se puede #er la si%uiente ima%en:

En la ima%en anterior tenemos #arios #alores de radianes: < @adianes seran cero %rados ' es el punto marcado por <56, en el e&e de las - ' a la derec+a del centro de la circunferencia. <.5 56 @adianes seran T< %rados el punto del e&e de las U aba&o del centro. . 56 @adianes es media circunferencia, .A< %rados. ..5 56 @adianes sera el e"ui#alente a 1Q< %rados 1 56 @adianes son los HV< %rados de la circunferencia completa ' correspondera con el mismo punto "ue los cero %rados. *s pues, para +acer un crculo completo con centro en 25<, 5<4 de 1< p eles de radio, podramos utili!ar un c$di%o como este: conte toBan#as.arc25<, 5< ,1< , <, Mat+.56Z1, false4N

Bomo se puede #er, la circunferencia empie!a en < 56 2cero4 ' termina en 1 56.

E,e+plo de dibu,o de ca+inos con arcos

5ara "ue se pueda entender el m(todo con el "ue se crean caminos comple&os a base de arcos en el elemento Ban#as, #amos a presentar el si%uiente e&emplo, en el "ue crearemos este sencillo dise8o.

En realidad aun"ue pare!ca una fi%ura un poco comple&a de +acer, se consi%ue con dos caminos. El primer camino se rellena con color ne%ro ' el se%undo con color naran&a. En la si%uiente ima%en se puede #er de una manera m)s clara los caminos "ue +abra en para +acer ese dise8o.

El primer camino tiene dos arcos conc(ntricos, uno con radio ma'or ' el se%undo con un radio menor. Este primer camino comien!a en el radio ma'or ' se puede #er una lnea %ris "ue +emos puesto, con unas flec+as, para poder reconocer la direcci$n "ue lle#a el camino.

?ea+os el c&di0o para .acer este dise@o:

#ar ct 3 car%aBonte toBan#as2Mmican#asM4N if2ct 4O LLprimer camino, en ne%ro ct .be%in5at+24N ct .arc2Q5,Q5,V<,Mat+.56,Mat+.56Z<.5,false4N ct .arc2Q5,Q5,H1,Mat+.56Z<.5,Mat+.56Z.,false4N ct .close5at+24 ct .fill24N LLse%undo camino, en naran&a ct .fill9t'le 3 MPffAA<<MN ct .be%in5at+24N ct .arc2Q5,Q5,.5,<,Mat+.56Z1,false4N ct .fill24N R

@ecordar "ue este c$di%o es parcial, puesto "ue las partes "ue faltaran para completarlo, como la funci$n car%aBonte toBan#as24 o el HTML del elemento can#as, 'a las conocemos de di#ersos artculos anteriores del Manual de Ban#as. De todos modos pod(is #er el c$di%o fuente del e&ercicio, "ue se puede #er en marc+a de una p)%ina aparte.

Curvas cuadrticas en el canvas

En un articulo anterior del manual de Ban#as del HTML 5 'a e plicamos los tipos de cur#as "ue podemos definir al dibu&ar en el lien!o. @ecordemos "ue para e presar cual"uier dibu&o en un can#as necesitamos reali!ar sentencias en len%ua&es de pro%ramaci$n, "ue s$lo nos permiten dibu&ar por medio de la definici$n de par)metros matem)ticos, por lo "ue a #eces el dibu&o puede ser una tarea m)s complicada "ue co%er un lapi! ' pintar sobre papel. En este caso #amos a re#isar un tipo de cur#a llamada Buadr)tica, "ue nos sir#e bien para +acer cur#as sencillas, no necesariamente arcos de una circunferencia, con un :nico punto de infle i$n. 5or intentar e plicarlo con palabras de manera entendible, podramos decir "ue las cur#as cuadr)ticas permiten e presar una :nica cur#atura entre dos puntos. 5ara e presarlas tenemos un punto inicial, un punto final de la cur#a ' un punto "ue define la tendencia de la cur#atura. Las cur#as cuadr)ticas son un tipo concreto de cur#as 7e!ier, es decir, una manera de e presar matem)ticamente una cur#a, similar a las 7e!ier pero m)s simplificada. Mientras "ue en las cur#as 7e!ier tenemos dos puntos para definir la tendencia de la cur#a, al principio ' el fin de la misma, en las cur#as cuadr)ticas s$lo tendremos un punto. 'ota- 0o +emos #isto toda#a las mencionadas cur#as 7e!ier, pues son m)s comple&as "ue las cur#as cuadr)ticas. Es por eso "ue las #eremos m)s adelante.

Mtodo quadraticCurveTo56 para dibu,ar curvas cuadrticas

Las cur#as cuadr)ticas act:an como otros m(todos para dibu&ar caminos en el can#as. @ecordemos "ue al +acer un camino en el can#as partimos de un punto inicial, "ue es el punto donde est) situado el puntero de dibu&o 2podramos ima%inar ese punto inicial como el lu%ar donde est) situado el l)pi! antes de empe!ar a dibu&ar la cur#a4. *s "ue, para e presar una cur#a cuadr)tica, tendremos "ue definir el punto final de la misma ' el punto ima%inario +acia el "ue se cur#ar) la lnea entre esos dos puntos. Ftili!aramos la si%uiente llamada a un m(todo del conte to del can#as. "uadraticBur#eTo2pc , pc', , '4 Este m(todo recibe cuatro #alores, "ue corresponden con dos puntos del lien!o. 6nsisto en "ue el punto inicial 'a est) implcito en el conte to del can#as, con la posici$n dada del puntero de dibu&o antes de comen!ar la cur#a cuadr)tica. Lue%o, el punto 2pc , pc'4 es el lu%ar "ima%inario" al "ue tendrera la cur#atura de la lnea. El punto 2 ,'4 sera el final de la cur#a.

Fna manera sencilla de entender este m(todo sera #er la si%uiente ima%en:

En el anterior %r)fico tenemos tres puntos: .. El primero, marcado con color morado, es la posici$n del puntero de dibu&o al iniciar la cur#a cuadr)tica. Ese punto no lo definimos al +acer la llamada al m(todo "uadraticBur#eTo24 por"ue 'a est) implcito en el conte to del can#as. En cual"uier caso se puede cambiar con una llamada a mo#eTo24 como +emos #isto en artculos anteriores. 1. El se%undo punto, marcado con color ro&o, es la tendencia de la cur#a cuadr)tica. Ese punto decimos "ue es ima%inario por"ue no aparece en la cur#a. 9implemente sir#e para definir c$mo ser) la cur#atura. 9e define con los par)metros pc , pc'. H. El tercer punto, dibu&ado en #erde, es el final de la cur#a, definido por los par)metros , '.

E,e+plo de curva cuadrtica

*+ora podemos #er un e&emplo de dibu&o en can#as de un camino "ue inclu'e dos cur#as cuadr)ticas. #ar ct 3 car%aBonte toBan#as2Mmican#asM4N if2ct 4O ct .be%in5at+24N ct .mo#eTo2.<,V<4 ct ."uadraticBur#eTo2.<,.<,V<,.<4N ct .lineTo2.1<,.<4N ct .lineTo2.1<,5<4N ct ."uadraticBur#eTo2.1<,..<,V<,..<4N ct .lineTo2.<,..<4N ct .fill24N R Bomo se puede #er, aparte de la cur#a cuadr)tica tenemos otras lneas rectas en este dibu&o, "ue lue%o se rellena de color con fill24. 0os da el resultado una forma parecida a una +o&a, "ue se puede #er en el e&emplo en marc+a. En el si%uiente artculo podremos #er otro e&emplo para +acer cur#as cuadr)ticas m)s a#an!ado.

4ectn0ulos con esquinas redondeadas en canvas> interactivo con Mootools

Gamos a mostrar un nue#o e&emplo de dibu&o de caminos en can#as un poco m)s a#an!ado. Brearemos una p)%ina con un can#as "ue tendr) un rect)n%ulo con es"uinas redondeadas ' una interfa! de usuario para "ue se pueda confi%urar el radio del redondeado de las es"uinas. Es un e&emplo un poco a#an!ado por"ue me!clamos #arias tecnolo%as, pues no s$lo tenemos "ue pintar en el can#as, sino tambi(n responder a acciones del usuario para alterar el dibu&o. 5or un lado tenemos "ue saber +acer dibu&os en can#as con cur#as cuadr)ticas. De +ec+o, este e&emplo de traba&o en can#as del HTML 5 nos a'udar) a obser#ar un poco m)s la utilidad de las cur#as cuadr)ticas. 5ara "ue el usuario pueda definir el radio de las cur#as en las es"uinas del rect)n%ulo #amos a colocar una interfa! de tipo "slider" creada con el frameworD Ia#ascript Mootools, "ue permite cambiar el #alor del radio arrastrando un control. *dem)s +abr) un campo de te to para cambiar este radio escribiendo cual"uier otro #alor directamente. 5ara saber me&or "u( es lo "ue #amos a crear, recomendamos ec+ar un #ista!o a la p)%ina del e&emplo.

*unci&n para crear un rectn0ulo con esquinas redondeadas en canvas

En las p)%inas de a'uda para traba&ar con caminos del can#as de Mo!illa +a' un c$di%o de una funci$n para +acer rect)n%ulos con es"uinas redondeadas "ue #amos a utili!ar para este e&emplo. function rounded@ect2ct , ,',widt+,+ei%+t,radius4O ct .be%in5at+24N ct .mo#eTo2 ,'Wradius4N ct .lineTo2 ,'W+ei%+tSradius4N ct ."uadraticBur#eTo2 ,'W+ei%+t, Wradius,'W+ei%+t4N ct .lineTo2 Wwidt+Sradius,'W+ei%+t4N ct ."uadraticBur#eTo2 Wwidt+,'W+ei%+t, Wwidt+,'W+ei%+tSradius4N ct .lineTo2 Wwidt+,'Wradius4N ct ."uadraticBur#eTo2 Wwidt+,', Wwidt+Sradius,'4N ct .lineTo2 Wradius,'4N ct ."uadraticBur#eTo2 ,', ,'Wradius4N ct .stroDe24N R 9implemente +ace un rect)n%ulo en la posici$n ,' con anc+ura ' altura dadas por medio de los par)metros widt+ ' +ei%+t ' un :ltimo par)metro radius para especificar el radio de la cur#atura en la es"uina redondeadas.

*+ora podramos +acer un rect)n%ulo redondeado con la si%uiente llamada: #ar ct 3 car%aBonte toBan#as2Mmican#asM4N if2ct 4O rounded@ect2ct , .<, .<, .H<, ..<, 1<4N R

1avascript para ca+biar el radio de las esquinas redondeadas

*+ora #eamos el c$di%o Ia#ascript para alterar el radio de las es"uinas como respuesta a e#entos del usuario. 5rimero obser#emos esta funci$n Ia#ascript, "ue recibe un #alor radio ' sir#e para actuali!ar el rect)n%ulo del can#as: function actuali!a@adio@ectan%ulo2radio4O radio 3 parse6nt2radio4 if 2is0a02radio44 O radio 3 <N R #ar ct 3 car%aBonte toBan#as2Mmican#asM4N if2ct 4O ct .clear@ect2<,<,.5<,.5<4N rounded@ect2ct , .<, .<, .H<, ..<, radio4N R R *+ora podemos #er el campo de te to para cambiar el radio de las es"uinas manualmente, escribiendo cual"uier otro #alor dentro del mismo. @adio: Jinput t'pe3"te t" name3"radio" #alue3".<" onDe'up3"actuali!a@adio@ectan%ulo2t+is.#alue4"K Bomo se puede #er, tiene definido un e#ento para actuali!ar el radio del rect)n%ulo cuando el usuario pulsa una tecla en el campo de te to.

C&di0o Mootools para el co+ponente slider

Hasta el momento no se +aba utili!ado para nada Mootools, es decir, todo lo "ue +emos #isto es Ia#ascript normal. 5ara lo "ue necesitamos el frameworD Ia#ascript es para el componente slider, "ue es una interfa! de usuario para cambiar #alores al mo#er una barra "ue se despla!a a i!"uierda o derec+a. Ese componente slider est) en la distribuci$n Mootools "ue se llama "more" ' tenemos "ue descar%arla por separado en la propia p)%ina de descar%a de Mootools, accediendo mediante el enlace "ue pone "More 7uilder". *ll tenemos "ue seleccionar por lo menos el componente "9lider" ' los pa"uetes re"ueridos se seleccionar)n autom)ticamente.

'ota- @ecordemos "ue el "More" de Mootools son una serie de scripts para crear interfaces de usuario a#an!adas. 9e descar%a por separado del "Bore", "ue es el frameworD fundamental. 5or supuesto, para poder implementar los componentes del "More" se necesita tener disponible el "Bore". En principio dicen en la p)%ina de Mootools "ue para e&ecutar cual"uier componente del "More" es necesario +aber descar%ado el "Bore" completo. *s pues, para la parte del slider tenemos "ue incluir los scrips "Bore" ' "More" Jscript src3"mootoolsS..1.,ScoreS'c.&s" t'pe3"te tL&a#ascript"KJLscriptK Jscript src3"mootoolsS..1.,.1Smore.&s" t'pe3"te tL&a#ascript"KJLscriptK Lue%o podramos tener un HTML como este para producir el contenedor del slider: Jdi# id3"slidercontenedor" st'le3"widt+:11<p N paddin%: 5p <p N bacD%roundScolor:PeeeeeeN"K Jdi# id3"slidercontrol" st'le3"widt+:.<p N +ei%+t: .<p N bacD%roundScolor:PTTTTddN"KJLdi#K JLdi#K Jdi#KGalor: Jspan id3"#alor"K1<JLspanKJLdi#K *+ora podemos #er el script Mootols para %enerar din)micamente el componente a partir de estos elementos HTML. window.addE#ent2"domread'", function24O #ar mi9lider 3 new 9lider2"slidercontenedor", "slidercontrol",O Mran%eM: \<,55], MstepsM: 55, Minitial9tepM: 1<, onB+an%e: function2lu%ar4O actuali!a@adio@ectan%ulo2lu%ar4N ^2"#alor"4.set2"+tml", lu%ar4N R R4N R4N

C&di0o co+pleto del e,ercicio

5ara acabar este e&ercicio nos "uedan al%unas cosas "ue no +emos comentado sobre el elemento can#as del HTML 5, por"ue se +aban #isto anteriormente en repetidos artculos del Manual de Ban#as, como la funci$n car%aBonte toBan#as24 De todos modos, para referencia podemos #er a continuaci$n el c$di%o completo de este creador din)mico e interacti#o de rect)n%ulos redondeados. J[D/BTU5E +tml 5F7L6B "SLLWHBLLDTD -HTML ..< TransitionalLLE0" "+ttp:LLwww.wH.or%LT@L +tml.LDTDL +tml.Stransitional.dtd"K

J+tmlK J+eadK Jscript src3"mootoolsS..1.,ScoreS'c.&s" t'pe3"te tL&a#ascript"KJLscriptK Jscript src3"mootoolsS..1.,.1Smore.&s" t'pe3"te tL&a#ascript"KJLscriptK JtitleKBur#as cuadr)ticasJLtitleK JscriptK LL@ecibe un identificador del elemento can#as ' car%a el can#as LLDe#ue#e el conte to del can#as o C*L9E si no +a podido conse%uise function car%aBonte toBan#as2idBan#as4O #ar elemento 3 document.%etElement7'6d2idBan#as4N if2elemento EE elemento.%etBonte t4O #ar conte to 3 elemento.%etBonte t2M1dM4N if2conte to4O return conte toN R R return C*L9EN R LLBrea un rect)n%ulo con las es"uinas rendondeadas function rounded@ect2ct , ,',widt+,+ei%+t,radius4O ct .be%in5at+24N ct .mo#eTo2 ,'Wradius4N ct .lineTo2 ,'W+ei%+tSradius4N ct ."uadraticBur#eTo2 ,'W+ei%+t, Wradius,'W+ei%+t4N ct .lineTo2 Wwidt+Sradius,'W+ei%+t4N ct ."uadraticBur#eTo2 Wwidt+,'W+ei%+t, Wwidt+,'W+ei%+tSradius4N ct .lineTo2 Wwidt+,'Wradius4N ct ."uadraticBur#eTo2 Wwidt+,', Wwidt+Sradius,'4N ct .lineTo2 Wradius,'4N ct ."uadraticBur#eTo2 ,', ,'Wradius4N ct .stroDe24N R function actuali!a@adio@ectan%ulo2radio4O radio 3 parse6nt2radio4 if 2is0a02radio44 O radio 3 <N R #ar ct 3 car%aBonte toBan#as2Mmican#asM4N if2ct 4O ct .clear@ect2<,<,.5<,.5<4N

rounded@ect2ct , .<, .<, .H<, ..<, radio4N R R window.onload 3 function24O LL@ecibimos el elemento can#as #ar ct 3 car%aBonte toBan#as2Mmican#asM4N if2ct 4O rounded@ect2ct , .<, .<, .H<, ..<, 1<4N R R JLscriptK JscriptK window.addE#ent2"domread'", function24O #ar mi9lider 3 new 9lider2"slidercontenedor", "slidercontrol",O Mran%eM: \<,55], MstepsM: 55, Minitial9tepM: 1<, onB+an%e: function2lu%ar4O actuali!a@adio@ectan%ulo2lu%ar4N ^2"#alor"4.set2"+tml", lu%ar4N R R4N R4N JLscriptK JL+eadK Jbod'K Jcan#as id3"mican#as" widt+3".5<" +ei%+t3".5<"K @ecicla tu na#e%ador[[ JLcan#asK Jform name3"fradio"K @adio: Jinput t'pe3"te t" name3"radio" #alue3".<" onDe'up3"actuali!a@adio@ectan%ulo2t+is.#alue4"K JLformK JbrKJbrK *rrastra el cuadradito a!ul para cambiar el radio del borde redondeado: Jdi# id3"slidercontenedor" st'le3"widt+:11<p N paddin%: 5p <p N bacD%roundScolor:PeeeeeeN"K Jdi# id3"slidercontrol" st'le3"widt+:.<p N +ei%+t: .<p N bacD%roundScolor:PTTTTddN"KJLdi#K JLdi#K

Jdi#KGalor: Jspan id3"#alor"K1<JLspanKJLdi#K JLpK JLbod'K JL+tmlK Cinali!amos con el enlace a la p)%ina donde est) el e&emplo en marc+a.

Curvas Be%ier en Canvas

7e!ier es el :ltimo de los tipos de cur#a sobre caminos en elementos can#as "ue nos "ueda por #er en el Manual de traba&o con el can#as del HTML 5. El modelo "ue propone 7e!ier es un tipo de funci$n matem)tica para definir cur#as comple&as en funci$n de #arios #alores. Es una t(cnica utili!ada en el dibu&o t(cnico, "ue sur%i$ inicialmente en el mundo de la aeron)utica ' el dise8o de coc+es ' "ue se +i!o bastante popular a ra! de su utili!aci$n en #arios pro%ramas de dise8o, como el conocido 5+otos+op. Las cur#as 7e!ier se crean por medio de una f$rmula matem)tica "ue permite especificar ' e#aluar tra!ados cur#os "ue podran tener m)s de un punto de infle i$n.

Mtodo para dibu,ar curvas Be%ier

En el dibu&o con el elemento Ban#as se +an implementado las cur#as 7e!ier a partir del si%uiente m(todo del conte to del can#as. be!ierBur#eTo2pc. , pc.', pc1 , pc1', , '4 Bomo #emos, se tienen "ue especificar coordenadas de tres puntos, de una manera similar a la "ue conocimos en las cur#as cuadr)ticas. 'ota-Las cur#as cuadr)ticas un tipo determinado de cur#as 7e!ier, lo "ue ocurre es "ue en las cur#as 7e!ier utili!amos dos puntos de tendencia de la cur#a, para el principio ' el final de la misma, mientras "ue en las cur#as cuadr)ticas s$lo se utili!aba uno. 5ara aclarar este punto recomendamos ec+ar un #ista!o a las e plicaciones sobre cur#as cuadr)ticas. En la si%uiente ima%en se puede #er un dia%rama sobre los puntos "ue se utili!an para definir una cur#a 7e!ier.

Bomo podemos #er, el m(todo be!ierBur#eTo24 tiene V par)metros "ue corresponden con las coordenadas de H puntos, pero en la ima%en se utili!an +asta , puntos para definir la cur#a 7e!ier, pues el punto de incicio de la cur#a 'a estaba en el conte to del can#as. *s "ue, atendiendo a la anterior ima%en, estos seran los puntos necesarios para componer la cur#a 7e!ier: .. El primer punto, marcado con color morado, es el punto inicial de la cur#a. Este punto no se tiene "ue definir, pues 'a est) implcito en el conte to del can#as, en el lu%ar donde estaba el puntero de dibu&o al llamar al m(todo be!ierBur#eTo24. 'ota- *l dibu&ar cual"uier se%mento de un camino tenemos definido siempre de antemano el punto inicial de ese se%mento del camino, pues es el lu%ar donde est) el puntero de dibu&o. 0osotros podramos cambiar ese puntero de dibu&o, para cambiar el primer punto de la cur#a, con una llamada al m(todo mo#eTo24. 1. El se%undo punto, "ue se +a marcado de color #erde, es la tendencia de la primera parte de la cur#a, "ue se indica con los par)metros pc. , pc.'. H. El tercero, marcado de color ro&o, es la tendencia de la se%unda parte de la cur#a, "ue se indica con los par)metros pc1 , pc1'. ,. Cinalmente, tenemos el punto final de la cur#a, marcado en color %ris, "ue se indica con los par)metros ,'.

E,e+plo de dibu,o con curvas Be%ier

*+ora podemos crear un e&emplo para "ue los lectores puedan terminar de entender las cur#as 7e!ier. Geamos un camino "ue contiene al%una recta ' #arias cur#as 7e!ier. #ar ct 3 car%aBonte toBan#as2Mmican#asM4N if2ct 4O ct .be%in5at+24N ct .fill9t'le 3 "Pccccff"N ct .mo#eTo2<,,<4N ct .be!ierBur#eTo2Q5,.Q,Q<,15,.<<,V<4N

ct ct ct ct ct R

.be!ierBur#eTo2.H<,H5,.,<,,5,.,5,5<4N .be!ierBur#eTo2.A<,,5,.T<,55,1<<,Q<4N .lineTo21<<,.5<4N .lineTo2<,.5<4N .fill24N

La cur#a anterior se puede #er representada en una p)%ina aparte. *+ora podemos complicar un poco m)s ese e&emplo para crear otros caminos con cur#as 7e!ier, con la particularidad de "ue #amos a rellenarlos con colores semitransparentes. 'ota- 0osotros asi%namos colores de relleno para los caminos con la propiedad fill9t'le del ob&eto conte to del can#as. 5odemos asi%nar un color con un c$di%o @;7 de una manera "ue 'a conocemos: ct .fill9t'le 3 "Pccccff"N 5ero aparte, tambi(n podemos indicar colores con #alores @;7 en decimal, de manera similar a como se +ace en B99, e incluso podemos asi%nar #alores @;7* 2con canal alp+a para la transparencia4. ct .fill9t'le 3 Mr%ba2.<<,1H<,.<<,<.H4MN ct ct ct ct ct ct ct ct ct ct ct ct ct ct ct ct ct .be%in5at+24N .fill9t'le 3 Mr%ba2.<<,1H<,.<<,<.H4MN .mo#eTo2<,T<4N .be!ierBur#eTo2T<,Q,..<,.5,.,<,H<4N .be!ierBur#eTo2.H<,55,.,<,V5,.,5,Q<4N .be!ierBur#eTo2.A<,,5,.T<,55,1<<,T54N .lineTo21<<,.5<4N .lineTo2<,.5<4N .fill24N .be%in5at+24N .fill9t'le 3 Mr%ba21H<,1H<,.<<,<.H4MN .mo#eTo25<,.5<4N .be!ierBur#eTo2T<,Q,..<,.5,.V<,.<4N .be!ierBur#eTo2.H<,.<5,.,<,.H5,1<<,H54N .lineTo21<<,.5<4N .lineTo2<,.5<4N .fill24N

Breando esos otros caminos el e&emplo "ueda como se puede #er en este enlace +ttp:LLwww.desarrolloweb.comLarticulosLe&emplosL+tml5Lbe!ierScur#e.+tml.

Asar i+0enes en el Canvas

Fna de las cosas m)s interesantes "ue podremos +acer cuando dibu&amos en el lien!o del elemento can#as es importar ' mostrar directamente el contenido de arc+i#os %r)ficos e ternos, es decir, usar im)%enes ;6C, I5; o 50; dentro de los dibu&os "ue reali!amos con can#as. En este artculo #eremos c$mo reali!ar este punto, aun"ue adelantamos "ue es bastante f)cil. Las im)%enes pro#enientes de arc+i#os %r)ficos las podemos crear con nuestro editor preferido ' +acer f)cilmente %r)ficos bastante creati#os ' #istosos, o editar a partir de fotos creadas con nuestra c)mara. Lue%o las podemos incluir en el Ban#as ' as conse%uir "ue nuestros traba&os ten%an una me&or calidad "ue si dibu&amos a mano con las funciones Ia#ascript del *56 de Ban#as. Bon un poco de creati#idad ' al%o de c$di%o Ia#ascript, podremos +acer composiciones basadas en #arias im)%enes "pe%adas" en el lien!o, o utili!ar im)%enes de fondo sobre las "ue lue%o pintamos con Ia#ascript para destacar cosas. Bomo podemos usar cual"uier tipo de arc+i#o %r)fico, mientras "ue est( soportado por el na#e%ador, las posibilidades son enormes. 4eferencia- 5ara entender este artculo debes +aber se%uido las e plicaciones del Manual del elemento Ban#as publicadas en DesarrolloWeb.com.

Mtodo dra")+a0e56 para pintar una i+a0en en el canvas

5ara dibu&ar una ima%en en el lien!o se utili!a el M(todo draw6ma%e24, "ue pertenece al ob&eto conte to del can#as, con la si%uiente sinta is: draw6ma%e2ob&etoXima%en, , '4 En#iamos tres par)metros, el primero es el ob&eto Ia#ascript de la ima%en "ue se desea incluir en el lien!o. Los dos si%uientes son las coordenadas donde situar la ima%en, siendo 2 ,'4 el punto donde se colocar) la es"uina superior i!"uierda de la ima%en. Bomo deca, este m(todo pertenece al ob&eto del can#as, por lo "ue antes de poder in#ocarlo debemos +aber obtenido el conte to del can#as, tal como +emos aprendido anteriormente en el Manual de Ban#as para cual"uier otro tipo de dibu&o.

#b,eto 1avascript i+a0en

El ob&eto ima%en es uno de los ob&etos b)sicos de Ia#ascript, "ue afortunadamente funciona i%ual en todos los na#e%adores. En realidad 'a lo +emos e plicado en anteriores artculos dentro de DesarrolloWeb.com. Boncretamente os recomendamos el Manual de Tratamiento de im)%enes en Ia#ascript. Este ob&eto de ima%en lo podemos obtener de #arias maneras, pero de momento #amos a aprender a %enerarlo din)micamente con una instrucci$n Ia#ascript. #ar im% 3 new 6ma%e24N

Bon esto tenemos una #ariable llamada "im%" "ue tiene un ob&eto ima%en dentro. Ese ob&eto ima%en en estos momentos est) sin nin%:n atributo. 5odramos decir "ue est) sin iniciali!ar. La tarea de iniciali!aci$n fundamental sera asi%narle una ruta a un arc+i#o %r)fico. im%.src 3 Mlo%oS%rande.&p%MN Esto +ace "ue en el ob&eto 6ma%e se car%ue la ima%en "ue est) en el arc+i#o Mlo%oS%rande.&p%M ' como no +emos especificado nin%:n directorio en la ruta, se supone "ue ese arc+i#o est) en la misma carpeta "ue el arc+i#o HTML donde est( ese c$di%o Ia#ascript. Fna #e! tenemos el ob&eto ima%en, podramos pintarlo en un can#as por medio de la funci$n draw6ma%e24. 9era al%o parecido a esto: ct .draw6ma%e2im%, .<, .<4N 5ero atenci$n, por"ue este c$di%o tiene un detalle: la ima%en no se dibu&ar) en el can#as a no ser "ue est( pre#iamente car%ada en el na#e%ador. En la secuencia de instrucciones, tal como lo tenemos a+ora: #ar im% 3 new 6ma%e24N im%.src 3 Mlo%oS%rande.&p%MN ct .draw6ma%e2im%, .<, .<4N El na#e%ador al especificar el arc+i#o de la ima%en, actuali!ando el atributo src, tiene "ue descar%arlo ' eso lle#a un tiempo. 5or tanto, si inmediatamente a indicar el arc+i#o, intentamos dibu&ar la ima%en, dar) un problema. Dic+o de otra manera, s$lo podemos dibu&ar la ima%en cuando estamos se%uros "ue el na#e%ador 'a la +a descar%ado. 5ara ase%urarnos de este punto, podemos usar el e#ento onload de la ima%en, para llamar a draw6ma%e24 s$lo cuando la ima%en +a terminado de car%arse. #ar im% 3 new 6ma%e24N im%.src 3 Mcan#asS+tml5.pn%MN im%.onload 3 function24O ct .draw6ma%e2im%, .<, .<4N R

E,e+plo de dibu,o de i+a0en en un canvas

Geremos a continuaci$n el c$di%o completo de un e&emplo "ue car%a una ima%en en un elemento can#as. J+tmlK J+eadK JtitleK6m)%enes en Ban#asJLtitleK Jscript lan%ua%e3"&a#ascript"K

function car%aBonte toBan#as2idBan#as4O #ar elemento 3 document.%etElement7'6d2idBan#as4N if2elemento EE elemento.%etBonte t4O #ar conte to 3 elemento.%etBonte t2M1dM4N if2conte to4O return conte toN R R return C*L9EN R

window.onload 3 function24O LL@ecibimos el elemento can#as #ar ct 3 car%aBonte toBan#as2Mmican#asM4N if2ct 4O LLBreo una ima%en conun ob&eto 6ma%e de Ia#ascript #ar im% 3 new 6ma%e24N LLindico la F@L de la ima%en im%.src 3 Mlo%oSdesarrolloweb.%ifMN LLdefino el e#ento onload del ob&eto ima%en im%.onload 3 function24O LLinclu'o la ima%en en el can#as ct .draw6ma%e2im%, .<, .<4N R R R JLscriptK JL+eadK Jbod'K Jcan#as id3"mican#as" widt+3"1<<" +ei%+t3".<<"K Tu na#e%ador no soporta can#as. JLcan#asK JLbod'K JL+tmlK 5odemos #er el e&emplo en marc+a en una p)%ina aparte.

En el si%uiente artculo #amos a mostrar di#ersas maneras de acceder a ob&etos 6ma%e desde Ia#ascript para mostrar esas im)%enes en el can#as.

Maneras de acceder a ob,etos )+a0e para +ostrar en el canvas

En el artculo anterior e plicamos las %eneralidades del traba&o con ima%enes en el elemento can#as del HTML 5. Bontinuando con esas e plicaciones #eremos a+ora c$mo pintar en un lien!o di#ersas im)%enes "ue e traemos de #arios modos. La idea es e perimentar con el dibu&o en Ban#as por medio de una nue#a pr)ctica ' a la #e! repasar todos los modos "ue e isten de obtener una ima%en por medio de Ia#ascript, "ue 'a e plicamos en el artculo Distintas maneras de acceder a ob&etos 6ma%e Ia#ascript. Bomo 'a se e plic$ en el mencionado artculo, e isten di#ersas maneras de conse%uir ob&etos 6ma%e en Ia#ascript, "ue lue%o podramos pintar en un can#as. Lo iremos #iendo directamente sobre el c$di%o fuente de este e&emplo: 9:; Traerse una i+a0en que .a/ en la p0ina- por medio del m(todo %etElement7'6d24, en#iando como par)metro el identificador de la eti"ueta 6M; de la ima%en deseada. LLBreo un ob&eto 6ma%e con una ima%en de la pa%ina #ar im% 3 document.%etElement7'6d2"im."4N LLlue%o la dibu&o en el can#as ct .draw6ma%e2im%, .<, .<4N 7:; ! travs del !rra/ de i+a0es- Tambi(n de una ima%en "ue +a'a en la p)%ina, en una eti"ueta 6M;. *l arra' accedemos con el ndice de la ima%en se%:n orden de aparici$n en el c$di%o HTML. LLconsi%o una ima%en desde el arra' de im)%enes ct .draw6ma%e2document.ima%es\.], .11, 1<4N 8:; Creando nuestro ob,eto )+a0e- >ue es la forma con la "ue traba&amos en el artculo anterior. U por tanto no #amos a repetir las e plicaciones. LLun ob&eto 6ma%e #ar ima%en 3 new 6ma%e24N ima%en.src 3 "+ttp:LLwww.desarrolloweb.comLima%esLiconosLuserX%o.pn%"N ima%en.onload 3 function24O ct .draw6ma%e2ima%en, HH<, .T54N R

=:; Especificar la i+a0en en for+ato data-url- "ue es una cadena de caracteres en formato 7aseV, "ue permite especificar elementos como im)%enes a partir de c$di%o, pero como si esos elementos los ad"uiri(semos remotamente. LLa tra#(s de un "data: url" #ar im% 3 new 6ma%e24N im%.src 3 Mdata:ima%eL%ifNbaseV,,@<l;/Dl+Bw*L*6******HpnL_iH57*E***E*L******L**s***6F+*W+Dc u/,lm0GindoQ"'r6-i;7U*/w33MN ct .draw6ma%e2im%, H<<, 1<<4N 5:; !cceder a el dise@o dibu,ado en otro canvas- para mostrar en un can#as el contenido de otro, como si fuera una ima%en. LLconsi%o una ima%en desde un can#as #ar im%Ban#as 3 document.%etElement7'6d2"can#as1"4N ct .draw6ma%e2im%Ban#as, .<<, .1<4N Este "uinto ' :ltimo m(todo permite al%unas aplicaciones interesantes, como mostrar un un can#as una miniatura de lo "ue +a' en otro can#as.

E,e+plo co+pleto de traba,o en canvas con i+0enes de varias fuentes

5ara acabar, podemos #er el c$di%o completo de una p)%ina "ue utili!a todos esos m(todos para acceder a im)%enes ' mostrarlas en el can#as. 9e podr) #er "ue en realidad se crean dos can#as. Fno s$lo lo creamos para poder copiarlo en otro can#as. J[D/BTU5E HTML 5F7L6B "SLLWHBLLDTD HTML ,.<.LLE0" "+ttp:LLwww.wH.or%LT@L+tml,Lstrict.dtd" K J+tmlK J+eadK JtitleK6m)%enes en Ban#asJLtitleK Jscript lan%ua%e3"&a#ascript"K function car%aBonte toBan#as2idBan#as4O #ar elemento 3 document.%etElement7'6d2idBan#as4N if2elemento EE elemento.%etBonte t4O #ar conte to 3 elemento.%etBonte t2M1dM4N if2conte to4O return conte toN R R return falseN

window.onload 3 function24O LLcar%o un camino en un can#as, para lue%o traerlo como ima%en #ar ct 3 car%aBonte toBan#as2Mcan#as1M4N if2ct 4O ct .fill9t'le 3 MPTT<<<<MN ct .be%in5at+24N ct .mo#eTo25<,.54N ct .lineTo2..1,.54N ct .lineTo2.,H,VT4N ct .lineTo2..1,.1H4N ct .lineTo25<,.1H4N ct .lineTo2.T,VT4N ct .close5at+24N ct .fill24N R

LL@ecibimos el elemento can#as #ar ct 3 car%aBonte toBan#as2Mmican#asM4N if2ct 4O LLBreo un ob&eto 6ma%e con una ima%en de la pa%ina #ar im% 3 document.%etElement7'6d2"im."4N ct .draw6ma%e2im%, .<, .<4N LLconsi%o una ima%en desde el arra' de im)%enes ct .draw6ma%e2document.ima%es\.], .11, 1<4N LLconsi%o una ima%en desde un can#as #ar im%Ban#as 3 document.%etElement7'6d2"can#as1"4N ct .draw6ma%e2im%Ban#as, .<<, .1<4N LLun ob&eto 6ma%e #ar ima%en 3 new 6ma%e24N ima%en.src 3 "+ttp:LLwww.desarrolloweb.comLima%esLiconosLuserX%o.pn%"N ima%en.onload 3 function24O ct .draw6ma%e2ima%en, HH<, .T54N R

LLa tra#(s de un "data: url" #ar im% 3 new 6ma%e24N im%.src 3 Mdata:ima%eL%ifNbaseV,,@<l;/Dl+Bw*L*6******HpnL_iH57*E***E*L******L**s***6F+*W+Dc u/,lm0GindoQ"'r6-i;7U*/w33MN ct .draw6ma%e2im%, H<<, 1<<4N R document.ima%es\.].src 3 Mdata:ima%eL%ifNbaseV,,@<l;/Dl+Bw*L*6******HpnL_iH57*E***E*L******L**s***6F+*W+Dc u/,lm0GindoQ"'r6-i;7U*/w33MN R JLscriptK JL+eadK Jbod'K J+1KBan#as "ue esto' creando con una serie de im)%enesJL+1K Jcan#as id3"mican#as" widt+3"5<<" +ei%+t3",<<"K Tu na#e%ador no soporta can#as. JLcan#asK JpK Jdi# st'le3"displa': noneN"K J+1KBosas "ue pon%o a"u para acceder desde Ia#ascriptJL+1K Jim% src3"can#asS+tml5.pn%" id3"im."K Jim% src3"lo%oS%rande.&p%"K JpK Jcan#as id3"can#as1" widt+3".5<" +ei%+t3".5<"K @ecicla tu na#e%ador[[ JLcan#asK JLdi#K JLbod'K JL+tmlK Este e&emplo se puede #er en una p)%ina aparte. En futuros artculos mostraremos c$mo podemos alterar la forma de las im)%enes din)micamente, para mostrarlas en el can#as con al%unos cambios.

Escalado / recorte en i+0enes en canvas

En pasados artculos del Manual de Ban#as estu#imos #iendo c$mo incluir im)%enes, es decir, como dibu&ar el contenido de una ima%en en el lien!o de un elemento can#as del HTML 5. 9e%uiremos con las e plicaciones en el presente te to, ofreciendo unas notas adicionales sobre el

tratamiento de im)%enes en Ban#as, "ue nos permitir)n redimensionar ' recortar las im)%enes antes de pintarlas. El m(todo es bien simple ' consiste en in#ocar al m(todo "ue dibu&a las im)%enes, draw6ma%e24, en#iando distintos &ue%os de par)metros. *nteriormente 'a +abamos traba&ado con este m(todo, "ue como debemos saber, pertenece al ob&eto conte to de un can#as. En el pasado lo llamamos simplemente en#i)ndole la ima%en ' las coordenadas donde +aba "ue colocarla. *+ora #amos a #er los otros dos modos de in#ocarlo, por medio de par)metros adicionales, "ue nos faltan por conocer. El primero de los modos de in#ocaci$n permite escalar una ima%en ' el se%undo recortarla ' escalarla en un mismo paso.

Escalar una i+a0en

@edimensionar una ima%en es sencillo. 9implemente tenemos "ue in#ocar al m(todo draw6ma%e24 en#iando adem)s las dimensiones de la ima%en "ue "ueremos "ue se dibu&e. El na#e%ador escalar) la ima%en para "ue ten%a las dimensiones "ue indi"uemos ' lue%o la pintar) en el can#as. Las nue#as dimensiones de la ima%en a dibu&ar pueden ser las "ue deseemos. 5ueden incluso no ser proporcionales a las dimesiones actuales, en ese caso el na#e%ador estirar) la ima%en o la ac+atar) para adaptarla a la anc+ura ' altura "ue +a'amos indicado. La manera de llamar a este m(todo del conte to del can#as es la si%uiente: draw6ma%e2ima%en, pos-, posU, anc+ura, altura4N Este m(todo dibu&ar) la ima%en en la posici$n definida por las coordenadas 2pos-, posU4 ' con la anc+ura ' altura dadas en los :ltimos dos par)metros. *s "ue podemos #er un e&emplo de c$di%o escalando la ima%en: #ar ct 3 car%aBonte toBan#as2Mmican#asM4N if2ct 4O LLBreo una ima%en conun ob&eto 6ma%e de Ia#ascript #ar im% 3 new 6ma%e24N LLindico la F@L de la ima%en im%.src 3 Mlo%oSdesarrolloweb.%ifMN LLdefino el e#ento onload del ob&eto ima%en im%.onload 3 function24O LLinclu'o la ima%en en el can#as escala mu' pe"ue8a ct .draw6ma%e2im%, <, <, 5< , 1,4N LLun poco ma'or ct .draw6ma%e2im%, Q<, .<, A< , HA4N LLtama8o natural ct .draw6ma%e2im%, .V<, 1<4N

R R Este e&emplo dibu&a la misma ima%en tres #eces, dos de ellas est) escalada a distintas dimensiones ' la :ltima est) a tama8o natural 2sin redimensionar4. 5uedes #er el e&emplo en funcionamiento en una p)%ina aparte.

4ecortar / escalar una i+a0en

El :ltimo modo de in#ocar al m(todo draw6ma%e24 es un poco m)s comple&o, 'a "ue le tenemos "ue indicar todos los datos para poder recortar ' escalar la ima%en antes de dibu&arla en el can#as. La llamada tendr) estos par)metros: draw6ma%e2ima%en, im%-, im%U, im%*nc+o, im%*lto, lien!o-, lien!oU, Lien!o*nc+o, Lien!o*lto4 Entre los par)metros, "ima%en" si%ue siendo el ob&eto ima%en Ia#ascript "ue "ueremos pintar. Todos los par)metros si%uientes los podemos entender a la #ista de la si%uiente ima%en:

5odemos #er a continuaci$n el c$di%o de un e&emplo "ue reali!a el recorte ' escalado de una ima%en. #ar ct 3 car%aBonte toBan#as2Mmican#asM4N if2ct 4O LLBreo una ima%en conun ob&eto 6ma%e de Ia#ascript #ar im% 3 new 6ma%e24N

LLindico la F@L de la ima%en im%.src 3 Msa%radaSfamilia.&p%MN LLdefino el e#ento onload del ob&eto ima%en im%.onload 3 function24O ct .draw6ma%e2im%, .QQ, .., .1< , 1H,, .<, .<, T<, .QV4N LLtama8o natural ct .draw6ma%e2im%, .V<, 1<4N R R Este e&emplo dibu&a una ima%en un par de #eces. 5rimero recorta un )rea de la ima%en ori%inal ' la escala, por el m(todo de draw6ma%e24 "ue acabamos de relatar. Lue%o dibu&a la ima%en ori%inal, sin recortar ni escalar, ' la coloca al lado de la otra, en el mismo can#as. 5ara acabar, de&amos un enlace, de modo "ue puedas #er este se%undo e&emplo de traba&o con im)%enes en can#as.