Manual de Canvas Del HTML 5

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.
com
Manual de Canvas del HTML 5

Manual del elemento Canvas del HTML 5 en el que aprenderemos a dibujar sobre los lienzos, utilizando Javascript y el AP de Canvas!
Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Miguel Angel Alvarez
Director de DesarrolloWeb.com http://www.desarrolloweb.com (18 captulos)
Manual de Canvas del HTML 5: http://www.desarrolloweb.com/manuales/manual-canvas-html5.html

!os manuales de DesarrolloWeb.com tienen el cop"right de sus autores. #o reproducir sin autorizaci$n.
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Parte 1:
Introduccin a HTML 5
%u& es '()! * " +u& no,edades traer- consigo en el desarrollo de p-ginas web. entre las +ue destaca el elemento /0#102. +ue estamos e3plicando en el presente manual.
1.1.- Qu es HTML 5
"eremos qu# es HTML 5, su previsi$n de tiempo para convertirse en una especi%icaci$n recomendada y las novedades m&s si'ni%icativas que proporcionar&! 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.
1.1.1.- 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

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
1.1.2.- 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 Workers: 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. Aplicaciones web Offline: 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. Geolocalizacin: Las p)%inas web se podr)n locali!ar %eo%r)ficamente por medio de un *56 "ue permita la ;eolocali!aci$n. Nuevas A !s para interfaz 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 presentacin: 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.
Artculo por

1.2.- Introdu
i!n a Canvas del HTML 5
Canvas es uno de los componentes m&s novedosos de est&ndar HTML 5 que sirve para dibujar din&micamente im&'enes en una p&'ina (eb! 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.
1.2.1.- Com"ati#ilidad de anvas

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.
1.2.2.- $olmi a "or la "ro"iedad intele tual 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.
1.2.%.- A"li a iones 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

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
Artculo por
Parte 2:
Primeros pasos con el elemento Canvas

4ntroducci$n al elemento /an,as " primeros e5emplos de dibu5o. 0prendemos a crear rect-ngulos " a con6igurar los colores +ue se utilizan en el dibu5o.
2.1.- &'em"lo de di#u'o on el A$I de anvas

)n primer ejemplo de dibujo en un elemento canvas de HTML 5 con el AP de canvas y Javascript! 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.
2.1.1.- Colo ar el elemento HTML anvas

*+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.
<canvas id="micanvas" width="200" height="100"> Este texto se muestra para los navegadores no compatibles con canvas. <br> Por avor! utili"a #ire ox! $hrome! %a ari u &pera. <'canvas>
El elemento tiene apertura ' cierre ' entre medias podemos escribir un te to "ue ser) lo "ue #ean los usuarios "ue entren

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com con na#e%adores "ue no soporten la eti"ueta B*0G*9. 5ara especificar las caractersticas de este can#as tenemos #arios atributos: Atributo id# 5ara asi%narle un nombre :nico ' lue%o referirnos a este can#as desde Ia#ascript. Atributos widt$ % $ei&$t# 5ara 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.
2.1.2.- $intar en un anvas mediante (avas ri"t

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:
''(ecibimos el elemento canvas var canvas = document.getElement)*+d,-micanvas-./ ''0ccedo al contexto de -2d- de este canvas! necesario para dibu1ar var contexto = canvas.get$ontext,-2d-./ ''2ibu1o en el contexto del canvas contexto. ill(ect,30! 0! 10! 130./
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.
''(ecibimos el elemento canvas var elemento = document.getElement)*+d,-micanvas-./ ''$omprobaci4n sobre si encontramos un elemento ''* podemos extraer su contexto con get$ontext,.! 5ue indica compatibilidad con canvas i ,elemento 66 elemento.get$ontext. 7 ''0ccedo al contexto de -2d- de este canvas! necesario para dibu1ar var contexto = elemento.get$ontext,-2d-./ i ,contexto. 7 ''%i tengo el contexto 2d es 5ue todo ha ido bien * puedo empe"ar a dibu1ar ''$omien"o dibu1ando un rect8ngulo contexto. ill(ect,0! 0! 130! 100./ ''cambio el color de estilo de dibu1o a ro1o contexto. ill%t*le = -9cc0000-/ ''dibu1o otro rect8ngulo contexto. ill(ect,10! 10! 100! :0./ ; ;
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:
<bod* onload=" uncion2e2ibu1o,.">

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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 = unction,.7 ''instrucciones de dibu1o en canvas ;
El c$di%o completo de nuestro primer e&emplo de uso de can#as sera el si%uiente:

<html> <head> <title>Probando canvas<'title> <script> window.onload = unction,.7 ''(ecibimos el elemento canvas var elemento = document.getElement)*+d,-micanvas-./ ''$omprobaci4n sobre si encontramos un elemento ''* podemos extraer su contexto con get$ontext,.! 5ue indica compatibilidad con canvas i ,elemento 66 elemento.get$ontext. 7 ''0ccedo al contexto de -2d- de este canvas! necesario para dibu1ar var contexto = elemento.get$ontext,-2d-./ i ,contexto. 7 ''%i tengo el contexto 2d es 5ue todo ha ido bien * puedo empe"ar a dibu1ar en el canvas ''$omien"o dibu1ando un rect8ngulo contexto. ill(ect,0! 0! 130! 100./ ''cambio el color de estilo de dibu1o a ro1o contexto. ill%t*le = -9cc0000-/ ''dibu1o otro rect8ngulo contexto. ill(ect,10! 10! 100! :0./ ; ; ; <'script> <'head> <bod*> <canvas id="micanvas" width="200" height="100"> Este texto se muestra para los navegadores no compatibles con canvas. <br> Por avor! utili"a #ire ox! $hrome! %a ari u &pera. <'canvas> <'bod*> <'html>
5odemos #er el e&emplo en marc+a en una p)%ina aparte.

Artculo por
2.2.- &ntender el lienzo de anvas

"eremos c$mo es el lienzo de un canvas, %ormado por un eje de coordenadas que podemos utilizar para posicionar todos los dibujos que queramos colocar en el 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

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
2.2.1.- &'e de oordenadas del anvas

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+J .,+ei%+tJ.4, osea, el punto m) imo de coordenadas marcado por su anc+ura ' altura.
Nota# Hemos indicado "ue el punto de la es"uina inferior derec+a es 2widt+J.,+ei%+tJ.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,K,KK4.
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:
contexto. ill(ect,10! 10! 100! :0./
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.

2.2.2.- )egundo e'em"lo de tra#a'o on anvas

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.
''(ecibe un identi icador del elemento canvas * carga el canvas ''2evueve el contexto del canvas o #0<%E si no ha podido conseguise unction carga$ontexto$anvas,id$anvas.7 var elemento = document.getElement)*+d,id$anvas./ i ,elemento 66 elemento.get$ontext.7 var contexto = elemento.get$ontext,-2d-./ i ,contexto.7 return contexto/ ; ; return #0<%E/ ;
5odremos in#ocar esta funci$n ' e#aluar su resultado para saber si se obtu#o o no el conte to del can#as.
var contexto = carga$ontexto$anvas,-micanvas-./ i ,contexto.7 ''=engo el contexto! entonces dibu1o sobre el canvas ;
En este e&emplo #amos a dibu&ar un par de rect)n%ulos, uno a!ul ' otro amarillo. La #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.
''cambio el color de dibu1o a a"ul contexto. ill%t*le = -9>>>> -/ ''dibu1o un rect8ngulo a"ul contexto. ill(ect,10!10!30!30./ ''cambio el color a amarillo con un poco de transparencia contexto. ill%t*le = -rgba,233!233!0!0.:.-/ ''pinto un rect8ngulo amarillo semitransparente contexto. ill(ect,?3!?3!30!30./
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:
<html> <head> <title>$anvas segundo e1emplo<'title> <script> ''(ecibe un identi icador del elemento canvas * carga el canvas ''2evueve el contexto del canvas o #0<%E si no ha podido conseguise unction carga$ontexto$anvas,id$anvas.7 var elemento = document.getElement)*+d,id$anvas./ i ,elemento 66 elemento.get$ontext.7 var contexto = elemento.get$ontext,-2d-./ i ,contexto.7 return contexto/ ; ; return #0<%E/ ; window.onload = unction,.7 ''(ecibimos el elemento canvas var contexto = carga$ontexto$anvas,-micanvas-./


i ,contexto.7 ''%i tengo el contexto ''cambio el color de dibu1o a a"ul contexto. ill%t*le = -9>>>> -/ ''dibu1o un rect8ngulo a"ul contexto. ill(ect,10!10!30!30./ ''cambio el color a amarillo con un poco de transparencia contexto. ill%t*le = -rgba,233!233!0!0.:.-/ ''pinto un rect8ngulo amarillo semitransparente contexto. ill(ect,?3!?3!30!30./ ; ; <'script> <'head> <bod*> <canvas id="micanvas" width="100" height="100"> =u navegador no soporta canvas. <'canvas> <'bod*> <'html>
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.
Artculo por
2.%.- *i#u'ar re tngulos en un Canvas

C$mo dibujar cuadrados y rect&n'ulos en un elemento Canvas de HTML mediante la %unci$n %ill*ect+, y stro-e*ect+, de Javascript, v&lida en HTML 5! 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. La 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.
2.%.1.- +un i!n ,ill-e t./

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:
ill(ect,x!*!anchura!altura.
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

10
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
Nota#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:

or ,i=0/i<=100/i@=10.7 contexto. ill(ect,i!i!3!3./ ;
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.
2.%.2.- +un i!n stro0e-e t./

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:
stroAe(ect,x!*!anchura!altura.
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.
or ,i=100/i>=0/iB=10.7 contexto.stroAe(ect,i!100Bi!3!3./ ;
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.
2.%.%.- +un i!n lear-e t./

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(ect,x!*!anchura!altura.
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.
2.%.1.- &'em"lo de rea i!n de re tngulos en anvas

*+ora #eamos un e&emplo de dibu&o de rect)n%ulos en un can#as, "ue utili!a las funciones comentadas anteriormente.
<html> <head> <title>$anvas rect8ngulos<'title> <script> ''(ecibe un identi icador del elemento canvas * carga el canvas ''2evueve el contexto del canvas o #0<%E si no ha podido conseguise unction carga$ontexto$anvas,id$anvas.7 var elemento = document.getElement)*+d,id$anvas./ i ,elemento 66 elemento.get$ontext.7 var contexto = elemento.get$ontext,-2d-./ i ,contexto.7

11

return contexto/ ; return #0<%E/ ;
window.onload = unction,.7 ''(ecibimos el elemento canvas var contexto = carga$ontexto$anvas,-micanvas-./ i ,contexto.7 ''%i tengo el contexto ''cambio el color de relleno de los rect8ngulos contexto. ill%t*le = -9cc0000-/ or ,i=0/i<=100/i@=10.7 '' ill(ect,x!*!width!height. dibu1a un rect8ngulo relleno de color contexto. ill(ect,i!i!3!3./ ; ''cambio el color de la lCnea de borde del rect8ngulo contexto.stroAe%t*le = -9 DD??-/ or ,i=100/i>=0/iB=10.7 ''stroAe(ect,x!*!width!height. dibu1a el borde de un rect8ngulo contexto.stroAe(ect,i!100Bi!3!3./ ;
; ;
unction borrarEparcial,.7 var contexto = carga$ontexto$anvas,-micanvas-./ i ,contexto.7 ''clear(ect,x!*!width!height. borra un 8rea rectangular del canvas de18ndola transparente contexto.clear(ect,>0!0!F2!130./ ; ; <'script> <'head> <bod* bgcolor="9 DD">
<canvas id="micanvas" width="130" height="130"> $ontenido 5ue s4lo ver8n los usuarios 5ue no soportan canvas en su navegador. Gsa una versi4n moderna de #ire ox! $hrome! %a ari! &pera... casi todos los navegadores excepto Explorer son compatibles con $anvas. <'canvas> <a hre ="9" onclicA="borrarEparcial,.">)orrado parcial<'a> <'bod*> <'html>
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.
Nota# 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 borrarMparcial24 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

12
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
Artculo por
2.1.- Tra#a'ando on olor de relleno 2 de trazado en anvas

An&lisis de dos atributos esenciales para asi'nar color a los dibujos que se .acen en el elemento canvas! Atributos %ill/tyle para el color de relleno y stro-e/tyle para el color de trazado! 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.
2.1.1.- Cam#iar el olor de relleno on ,ill)t2le

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.
ctx. ill%t*le = -9DD0000-/
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.
2.1.2.- Cam#iar el olor de trazado on stro0e)t2le

*+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.
ctx.stroAe%t*le = -90000DD-/
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.
2.1.%.- 3tras nota iones "ara de,inir olores en anvas

*+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: "NffOO<<" Bolor con @;7 en base decimal: "r%b2.<<, 15, 1<O4" Bolor @;7* 2canal alp+a o transparencia, como en B99H4: "r%ba2155, .15, <, <.54" Bon @;7 ' porcenta&e: "r%b2.<<P, 1<P, <4"
13

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 0osotros podremos ele%ir la "ue m)s nos con#en%a se%:n nuestro caso.
2.1.1.- &'em"lo "ara am#iar el olor 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.
unction aleatorio,in erior!superior.7 numPosibilidades = superior B in erior aleat = Hath.random,. I numPosibilidades aleat = Hath. loor,aleat. return parse+nt,in erior. @ aleat ; unction color0leatorio,.7 return "rgb," @ aleatorio,0!233. @ "!" @ aleatorio,0!233. @ "!" @ aleatorio,0!233. @ "."/ ;
*+ora #amos a mostrar otra funci$n para dibu&ar el lien!o de un can#as, rellenando de cuadraditos con colores aleatorios:
unction cuadrados0leatorios,.7 or,i=0/ i<?00/ i@=10.7 or,1=0/ 1<230/ 1@=10.7 contexto. ill%t*le = color0leatorio,./ contexto. ill(ect,i!1!10!10. ; ; ;
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.
''variable global contexto sin iniciali"ar var contexto/ window.onload = unction,.7 ''(ecibimos el elemento canvas contexto = carga$ontexto$anvas,-micanvas-./ i ,contexto.7 ''%i tengo el contexto! de ino la unci4n peri4dica set+nterval,"cuadrados0leatorios,contexto."! 200./ ; ;
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.
2.1.5.- &'em"lo "ara am#iar el olor del trazado

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:
unction cuadrados0leatorios,.7

14

or,i=0/ i<?00/ i@=10.7 or,1=0/ 1<230/ 1@=10.7 contexto.stroAe%t*le = color0leatorio,./ contexto.stroAe(ect,i!1!3!3. ; ; ;
El e&emplo cambiando esta funci$n se puede #er en una p)%ina aparte.

Artculo por
Parte 3:
Dibu ar caminos en Canvas

0 tra,&s de los caminos se pueden dibu5ar todo tipo de 6iguras en el lienzo de /an,as. 1emos todos los tipos de caminos +ue e3isten " di6erentes e5emplos pr-cticos.
%.1.- Caminos en Canvas del HTML 5

"eamos c$mo realizar dibujos en un canvas con las %unciones para caminos, que permiten la creaci$n de estructuras m&s complejas! 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.
%.1.1.- +un i!n #egin$at4./

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.

15
Nota# 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.
%.1.2.- +un i!n moveTo./

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.
%.1.%.- +un i!n lineTo./

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.
%.1.1.- +un i!n ,ill./

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.
%.1.5.- &'em"lo de amino sen illo

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.
ctx.beginPath,./ ctx.move=o,30!3./ ctx.line=o,:3!>3./ ctx.line=o,30!123./ ctx.line=o,23!>3./ ctx. ill,./
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.

16
Nota# 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.
%.1.5.- C!digo om"leto del e'em"lo de amino

* 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.
<html> <head> <title>$anvas $aminos<'title> <script> ''<a *a conocida unci4n para cargar el contexto de un canvas unction carga$ontexto$anvas,id$anvas.7 var elemento = document.getElement)*+d,id$anvas./ i ,elemento 66 elemento.get$ontext.7 var contexto = elemento.get$ontext,-2d-./ i ,contexto.7 return contexto/ ; ; return #0<%E/ ; window.onload = unction,.7 ''(ecibimos el elemento canvas var ctx = carga$ontexto$anvas,-micanvas-./ i ,ctx.7 ctx.beginPath,./ ctx.move=o,30!3./ ctx.line=o,:3!>3./ ctx.line=o,30!123./ ctx.line=o,23!>3./ ctx. ill,./ ; ; <'script> <'head> <bod*> <canvas id="micanvas" width="130" height="130"> 0ccede a este script con un navegador 5ue acepte canvas del J=H< 3 <'canvas> <'bod*> <'html>
5ara acabar, podemos #er el e&emplo en marc+a en una p)%ina aparte.

Artculo por
%.2.- &'em"lo 2 de di#u'o de aminos en anvas

/e'undo ejemplo sobre los caminos en el elemento canvas, donde veremos las %unciones closePat.+, y stro-e+,! 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.

17
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
%.2.1.- +un i!n lose$at4./

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.
%.2.2.- +un i!n stro0e./

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.
%.2.%.- &'em"lo de amino on lose$at4./ 2 stro0e./

* 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.
ctx.beginPath,./ ctx.move=o,1!1./ or ,i=1/i<100/i@=3.7 i ,,iK2.L=0.7 ctx.line=o,i@3!i./ ;else7 ctx.line=o,i!i@3./ ; ; ctx.line=o,1!i./ ctx.closePath,./ ctx.stroAe,./ Nota#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.
%.2.1.- &'em"lo de l6nea dis ontinua

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.

18
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com El dibu&o anterior lo +emos reali!ado con un c$di%o como el "ue si%ue:
ctx.beginPath,./ ctx.move=o,1!1./ or ,i=1/i<100/i@=3.7 i ,,iK2.L=0.7 ctx.line=o,i@3!i./ ;else7 ctx.move=o,i!i@3./ ; ; ctx.stroAe,./
%.2.5.- &'em"lo om"leto de di#u'o de l6neas on aminos en anvas

5ara todos los interesados, colocamos a continuaci$n el c$di%o completo de este e&emplo.
<html> <head> <title>$anvas $aminos con stroAe<'title> <script> ''(ecibe un identi icador del elemento canvas * carga el canvas ''2evueve el contexto del canvas o #0<%E si no ha podido conseguise unction carga$ontexto$anvas,id$anvas.7 var elemento = document.getElement)*+d,id$anvas./ i ,elemento 66 elemento.get$ontext.7 var contexto = elemento.get$ontext,-2d-./ i ,contexto.7 return contexto/ ; ; return alse/ ; window.onload = unction,.7 ''(ecibimos el elemento canvas var ctx = carga$ontexto$anvas,-micanvas-./ i ,ctx.7 ctx.beginPath,./ ctx.move=o,1!1./ or ,i=1/i<100/i@=3.7 i ,,iK2.L=0.7 ctx.line=o,i@3!i./ ;else7 ctx.line=o,i!i@3./ ; ; ctx.line=o,1!i./ ctx.closePath,./ ctx.stroAe,./ ; ''otro e1emplo basado en el mismo c4digo var ctx = carga$ontexto$anvas,-micanvas2-./ i ,ctx.7 ctx.beginPath,./ ctx.move=o,1!1./ or ,i=1/i<100/i@=3.7 i ,,iK2.L=0.7 ctx.line=o,i@3!i./ ;else7 ctx.move=o,i!i@3./ ; ; ctx.stroAe,./ ; ;

19

<'script> <'head> <bod*> <canvas id="micanvas" width="130" height="130"> (ecicla tu browser! P&( #0M&(LL <'canvas> <br> <br> <canvas id="micanvas2" width="130" height="130"> P&( #0M&(! (ecicla tu navegadorLL <'canvas> <'bod*> <'html>
5odemos acceder a una p)%ina con el e&emplo en funcionamiento.

Artculo por
%.%.- Caminos en anvas7 e'em"lo %

C$mo dibujar un camino en canvas de HTML 5 con diversas variantes, cerrado y sin cerrar, y con o sin relleno de color! >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:
%.%.1.- 1.- Camino relleno sin ierre e8"l6 ito

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.

20

''Jexagono relleno de color! cierre de camino autom8tico con var ctx = carga$ontexto$anvas,-canvas1-./ i ,ctx.7 ctx.beginPath,./ ctx.move=o,30!13./ ctx.line=o,112!13./ ctx.line=o,1F?!>D./ ctx.line=o,112!12?./ ctx.line=o,30!12?./ ctx.line=o,1D!>D./ ctx. ill,./ ; ill
%.%.2.- 2.- Camino relleno on ierre e8"l6 ito

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.
''Jexagono rellenado! cierre de camino explCcito con closePath var ctx = carga$ontexto$anvas,-canvas2-./ i ,ctx.7 ctx. ill%t*le = -9DD0000-/ ctx.beginPath,./ ctx.move=o,30!13./ ctx.line=o,112!13./ ctx.line=o,1F?!>D./ ctx.line=o,112!12?./ ctx.line=o,30!12?./ ctx.line=o,1D!>D./ ctx.closePath,./ ctx. ill,./ ;
%.%.%.- %.- Camino sin relleno 2 sin ierre

*+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.
''Jexagono s4lo lCnea! sin cierre de camino var ctx = carga$ontexto$anvas,-canvas?-./ i ,ctx.7 ctx.beginPath,./ ctx.move=o,30!13./ ctx.line=o,112!13./ ctx.line=o,1F?!>D./ ctx.line=o,112!12?./ ctx.line=o,30!12?./ ctx.line=o,1D!>D./ ctx.stroAe,./ ;

21
%.%.1.- 1.- Camino sin relleno 2 on ierre

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.
''Jexagono s4lo lCnea! con cierre de camino closePath,. var ctx = carga$ontexto$anvas,-canvasF-./ i ,ctx.7 ctx.stroAe%t*le = -9DD0000-/ ctx.beginPath,./ ctx.move=o,30!13./ ctx.line=o,112!13./ ctx.line=o,1F?!>D./ ctx.line=o,112!12?./ ctx.line=o,30!12?./ ctx.line=o,1D!>D./ ctx.closePath,./ ctx.stroAe,./ ;
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.
Artculo por
%.1.- 3tros e'em"los de di#u'o de aminos en elementos Canvas

0n este art1culo veremos otras pruebas de dibujo de caminos en los 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.
%.1.1.- $rimer e'em"lo9 "intar dos aminos distintos

Este primer e&emplo tendra el si%uiente c$di%o:
var ctx = carga$ontexto$anvas,-micanvas-./ i ,ctx.7 ''primer camino ctx.beginPath,./ ctx.move=o,20!10./ ctx.line=o,?2!20./ ctx.line=o,22!20./ ctx.line=o,22!?3./ ctx.line=o,1:!?3./ ctx.line=o,1:!20./

22

ctx.line=o,:!20./ ''ctx.closePath,./ opcional antes de un ctx. ill,./
ill,.
''creo un segundo camino ctx.beginPath,./ ''probar a comentar esta lCnea para ver lo 5ue pasa ctx. ill%t*le = -9 NN00-/ ctx.move=o,F:!30./ ctx.line=o,>:!:0./ ctx.line=o,>:!?0./ ctx.closePath,./ ctx. ill,./
Nota# 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:
ctx. ill%t*le = -9 NN00-/
El primer e&emplo se puede #er en marc+a en este enlace.
%.1.2.- )egundo e'em"lo9 un amino :ue "inta en dos lugares 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.
var ctx = carga$ontexto$anvas,-micanvas-./ i ,ctx.7 ctx.beginPath,./ ctx.move=o,20!:./ ctx.line=o,?2!20./ ctx.line=o,22!20./ ctx.line=o,22!?3./ ctx.line=o,1:!?3./ ctx.line=o,1:!20./ ctx.line=o,:!20./ ctx.closePath,./ ''cambio el color de la lCnea! el color cambia para todo el tra"o ctx.stroAe%t*le = -9 NN00-/ ''sigo en el mismo camino! pero muevo el puntero de dibu1o ctx.move=o,F:!30./ ctx.line=o,>:!:0./ ctx.line=o,>:!?0./ ctx.closePath,./ ctx.stroAe,./ ;

23
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
Artculo por
%.5.- Curvas en aminos de Canvas del HTML 5

Los caminos en los elementos canvas del HTML 5 pueden tener curvas, que conse'uimos por medio de los arcos, las curvas cuadr&ticas y las curvas bezier! 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: Arcos# 0os 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 cuadr'ticas# Es 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 Bezier# Es 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.
Artculo por
%.5.- *i#u'o de urvas on ar os en anvas

C$mo dibujar arcos, para .acer curvas basadas en circun%erencias o se'mentos de ellas, en el lienzo de los elementos Canvas del HTML 5!

24
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
Nota# 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:

arc,x! *! radio! anguloEinicio! anguloE inal! sentidoEcontrarioEdelErelo1.
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%uloMinicio ' an%uloMfinal 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. 9entidoMcontrarioMdelMrelo& 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 = nOmeroEP+ x ,grados'1N0.
5ara con#ertir %rados en radianes podramos utili!ar la si%uiente lnea de c$di%o Ia#ascript:
var radians = ,Hath.P+'1N0.Idegrees
Nota# Mat+.56 es el famoso n:mero 56 2H..,.O4. 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+.

25
%.5.1.- &ntender 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 K< %rados el punto del e&e de las L 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 HO< %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:
contexto$anvas.arc,30! 30 !20 ! 0! Hath.P+I2! alse./
Bomo se puede #er, la circunferencia empie!a en < 56 2cero4 ' termina en 1 56.
%.5.2.- &'em"lo de di#u'o de aminos on ar os

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.

26
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
%.5.%.- ;eamos el !digo "ara 4a er este dise<o.

var ctx = carga$ontexto$anvas,-micanvas-./ i ,ctx.7 ''primer camino! en negro ctx.beginPath,./ ctx.arc,:3!:3!>0!Hath.P+!Hath.P+I0.3! alse./ ctx.arc,:3!:3!?2!Hath.P+I0.3!Hath.P+I1! alse./ ctx.closePath,. ctx. ill,./ ''segundo camino! en naran1a ctx. ill%t*le = -9 NN00-/ ctx.beginPath,./ ctx.arc,:3!:3!13!0!Hath.P+I2! alse./ ctx. ill,./ ;
@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.
Artculo por
%.=.- Curvas uadrti as en el anvas

Las curvas cuadr&ticas son un tipo especial de curva que se de%ine por tres puntos, dos para el inicio y %in de la curva y otro para su tendencia! 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

27
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
Nota# 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.
%.=.1.- Mtodo :uadrati CurveTo./ "ara di#u'ar urvas uadrti as

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.
5uadratic$urve=o,pcx! pc*! x! *.
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 , '.
%.=.2.- &'em"lo de urva uadrti a

*+ora podemos #er un e&emplo de dibu&o en can#as de un camino "ue inclu'e dos cur#as cuadr)ticas.
var ctx = carga$ontexto$anvas,-micanvas-./ i ,ctx.7 ctx.beginPath,./ ctx.move=o,10!>0. ctx.5uadratic$urve=o,10!10!>0!10./ ctx.line=o,120!10./ ctx.line=o,120!30./

28

ctx.5uadratic$urve=o,120!110!>0!110./ ctx.line=o,10!110./ ctx. ill,./ ;
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.
Artculo por
%.>.- -e tngulos on es:uinas redondeadas en anvas9 intera tivo on Mootools

"emos las curvas cuadr&ticas a trav#s de un ejemplo interactivo de trabajo con caminos en canvas del HTML 5 que dibuja rect&n'ulos con esquinas redondeadas! 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.
%.>.1.- +un i!n "ara rear un re tngulo on es:uinas redondeadas en anvas

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.
unction rounded(ect,ctx!x!*!width!height!radius.7 ctx.beginPath,./ ctx.move=o,x!*@radius./ ctx.line=o,x!*@heightBradius./ ctx.5uadratic$urve=o,x!*@height!x@radius!*@height./ ctx.line=o,x@widthBradius!*@height./ ctx.5uadratic$urve=o,x@width!*@height!x@width!*@heightBradius./ ctx.line=o,x@width!*@radius./ ctx.5uadratic$urve=o,x@width!*!x@widthBradius!*./ ctx.line=o,x@radius!*./ ctx.5uadratic$urve=o,x!*!x!*@radius./ ctx.stroAe,./ ;
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:
var ctx = carga$ontexto$anvas,-micanvas-./ i ,ctx.7 rounded(ect,ctx! 10! 10! 1?0! 110! 20./

29

;
%.>.2.- (avas ri"t "ara am#iar el radio de las es:uinas 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:
unction actuali"a(adio(ectangulo,radio.7 radio = parse+nt,radio. i ,isPaP,radio.. 7 radio = 0/ ; var ctx = carga$ontexto$anvas,-micanvas-./ i ,ctx.7 ctx.clear(ect,0!0!130!130./ rounded(ect,ctx! 10! 10! 1?0! 110! radio./ ;
*+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.
(adioQ <input t*pe="text" name="radio" value="10" onAe*up="actuali"a(adio(ectangulo,this.value.">
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!digo Mootools "ara el om"onente 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.
Nota# @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"
<script src="mootoolsB1.2.FBcoreB*c.1s" t*pe="text'1avascript"><'script> <script src="mootoolsB1.2.F.2Bmore.1s" t*pe="text'1avascript"><'script>
Lue%o podramos tener un HTML como este para producir el contenedor del slider:
<div id="slidercontenedor" st*le="widthQ220px/ paddingQ 3px 0px/ bacAgroundBcolorQ9eeeeee/"> <div id="slidercontrol" st*le="widthQ10px/ heightQ 10px/ bacAgroundBcolorQ9DDDDdd/"><'div> <'div> <div>MalorQ <span id="valor">20<'span><'div>
*+ora podemos #er el script Mootols para %enerar din)micamente el componente a partir de estos elementos HTML.
window.addEvent,"domread*"! unction,.7 var mi%lider = new %lider,"slidercontenedor"! "slidercontrol"!7 -range-Q R0!33S! -steps-Q 33! -initial%tep-Q 20! on$hangeQ unction,lugar.7 actuali"a(adio(ectangulo,lugar./ T,"valor"..set,"html"! lugar./ ; ;./

30

;./
%.>.1.- C!digo om"leto del e'er i io

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.
<L2&$=UPE html PG)<+$ "B''V?$''2=2 WJ=H< 1.0 =ransitional''EP" "httpQ''www.w?.org'=('xhtml1'2=2'xhtml1Btransitional.dtd"> <html> <head> <script src="mootoolsB1.2.FBcoreB*c.1s" t*pe="text'1avascript"><'script> <script src="mootoolsB1.2.F.2Bmore.1s" t*pe="text'1avascript"><'script> <title>$urvas cuadr8ticas<'title> <script> ''(ecibe un identi icador del elemento canvas * carga el canvas ''2evueve el contexto del canvas o #0<%E si no ha podido conseguise unction carga$ontexto$anvas,id$anvas.7 var elemento = document.getElement)*+d,id$anvas./ i ,elemento 66 elemento.get$ontext.7 var contexto = elemento.get$ontext,-2d-./ i ,contexto.7 return contexto/ ; ; return #0<%E/ ; ''$rea un rect8ngulo con las es5uinas rendondeadas unction rounded(ect,ctx!x!*!width!height!radius.7 ctx.beginPath,./ ctx.move=o,x!*@radius./ ctx.line=o,x!*@heightBradius./ ctx.5uadratic$urve=o,x!*@height!x@radius!*@height./ ctx.line=o,x@widthBradius!*@height./ ctx.5uadratic$urve=o,x@width!*@height!x@width!*@heightBradius./ ctx.line=o,x@width!*@radius./ ctx.5uadratic$urve=o,x@width!*!x@widthBradius!*./ ctx.line=o,x@radius!*./ ctx.5uadratic$urve=o,x!*!x!*@radius./ ctx.stroAe,./ ; unction actuali"a(adio(ectangulo,radio.7 radio = parse+nt,radio. i ,isPaP,radio.. 7 radio = 0/ ; var ctx = carga$ontexto$anvas,-micanvas-./ i ,ctx.7 ctx.clear(ect,0!0!130!130./ rounded(ect,ctx! 10! 10! 1?0! 110! radio./ ;
window.onload = unction,.7 ''(ecibimos el elemento canvas var ctx = carga$ontexto$anvas,-micanvas-./ i ,ctx.7 rounded(ect,ctx! 10! 10! 1?0! 110! 20./ ; ; <'script>

31

<script> window.addEvent,"domread*"! unction,.7 var mi%lider = new %lider,"slidercontenedor"! "slidercontrol"!7 -range-Q R0!33S! -steps-Q 33! -initial%tep-Q 20! on$hangeQ unction,lugar.7 actuali"a(adio(ectangulo,lugar./ T,"valor"..set,"html"! lugar./ ; ;./ ;./ <'script> <'head> <bod*> <canvas id="micanvas" width="130" height="130"> (ecicla tu navegadorLL <'canvas> < orm name=" radio"> (adioQ <input t*pe="text" name="radio" value="10" onAe*up="actuali"a(adio(ectangulo,this.value."> <' orm> <br><br> 0rrastra el cuadradito a"ul para cambiar el radio del borde redondeadoQ <div id="slidercontenedor" st*le="widthQ220px/ paddingQ 3px 0px/ bacAgroundBcolorQ9eeeeee/"> <div id="slidercontrol" st*le="widthQ10px/ heightQ 10px/ bacAgroundBcolorQ9DDDDdd/"><'div> <'div> <div>MalorQ <span id="valor">20<'span><'div> <'p> <'bod*> <'html>
Cinali!amos con el enlace a la p)%ina donde est) el e&emplo en marc+a.

Artculo por
%.?.- Curvas @ezier en Canvas

Las curvas 2ezier son la manera m&s compleja de especi%icar dibujar caminos curvos en el elemento canvas del HTML 5! 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.
%.?.1.- Mtodo "ara di#u'ar urvas @ezier

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"ier$urve=o,pc1x! pc1*! pc2x! pc2*! x! *.
Bomo #emos, se tienen "ue especificar coordenadas de tres puntos, de una manera similar a la "ue conocimos en las cur#as cuadr)ticas.

32
Nota#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 O 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.
Nota# *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 ,'.
%.?.2.- &'em"lo de di#u'o on urvas @ezier

*+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.
var ctx = carga$ontexto$anvas,-micanvas-./ i ,ctx.7 ctx.beginPath,./ ctx. ill%t*le = "9cccc "/ ctx.move=o,0!F0./ ctx.be"ier$urve=o,:3!1:!:0!23!100!>0./ ctx.be"ier$urve=o,1?0!?3!1F0!F3!1F3!30./ ctx.be"ier$urve=o,1N0!F3!1D0!33!200!:0./ ctx.line=o,200!130./ ctx.line=o,0!130./ ctx. ill,./

33

;
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.
Nota# 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: ctx. ill%t*le = "9cccc "/ 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. ctx. ill%t*le = -rgba,100!2?0!100!0.?.-/ ctx.beginPath,./ ctx. ill%t*le = -rgba,100!2?0!100!0.?.-/ ctx.move=o,0!D0./ ctx.be"ier$urve=o,D0!:!110!13!1F0!?0./ ctx.be"ier$urve=o,1?0!33!1F0!>3!1F3!:0./ ctx.be"ier$urve=o,1N0!F3!1D0!33!200!D3./ ctx.line=o,200!130./ ctx.line=o,0!130./ ctx. ill,./ ctx.beginPath,./ ctx. ill%t*le = -rgba,2?0!2?0!100!0.?.-/ ctx.move=o,30!130./ ctx.be"ier$urve=o,D0!:!110!13!1>0!10./ ctx.be"ier$urve=o,1?0!103!1F0!1?3!200!?3./ ctx.line=o,200!130./ ctx.line=o,0!130./ ctx. ill,./
Breando esos otros caminos el e&emplo "ueda como se puede #er en este enlace +ttp:RRwww.desarrolloweb.comRarticulosRe&emplosR+tml5Rbe!ierJcur#e.+tml.
Artculo por

34
Parte !:
Traba o con im"#enes en Canvas

0 tra,&s de la utilizaci$n de im-genes se pueden me5orar mucho los dise7os +ue se realizan en los can,as. 0dem-s mostramos distintas maneras de modi6icar din-micamente por medio de scripts el aspecto de las im-genes.
1.1.- Asar imgenes en el Canvas

3ibujar el contenido de im&'enes en los elementos canvas del HTML 5, usando cualquier tipo de arc.ivo 'r&%ico permitido +'i%, jp', pn', para incluir una ima'en en el lienzo de un 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.
(eferencia# 5ara entender este artculo debes +aber se%uido las e plicaciones del Manual del elemento Ban#as publicadas en DesarrolloWeb.com.
1.1.1.- Mtodo draBImage./ "ara "intar una imagen en el anvas

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:
draw+mage,ob1etoEimagen! x! *.
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.

35
1.1.2.- 3#'eto (avas ri"t imagen

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.
var img = new +mage,./
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.
img.src = -logoBgrande.1pg-/
Esto +ace "ue en el ob&eto 6ma%e se car%ue la ima%en "ue est) en el arc+i#o Slo%oJ%rande.&p%S ' 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:
ctx.draw+mage,img! 10! 10./
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:
var img = new +mage,./ img.src = -logoBgrande.1pg-/ ctx.draw+mage,img! 10! 10./
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.
var img = new +mage,./ img.src = -canvasBhtml3.png-/ img.onload = unction,.7 ctx.draw+mage,img! 10! 10./ ;
1.1.%.- &'em"lo de di#u'o de imagen en un anvas

Geremos a continuaci$n el c$di%o completo de un e&emplo "ue car%a una ima%en en un elemento can#as.
<html> <head> <title>+m8genes en $anvas<'title> <script language="1avascript"> unction carga$ontexto$anvas,id$anvas.7 var elemento = document.getElement)*+d,id$anvas./ i ,elemento 66 elemento.get$ontext.7 var contexto = elemento.get$ontext,-2d-./ i ,contexto.7 return contexto/ ; ; return #0<%E/ ; window.onload = unction,.7 36


''(ecibimos el elemento canvas var ctx = carga$ontexto$anvas,-micanvas-./ i ,ctx.7 ''$reo una imagen conun ob1eto +mage de Xavascript var img = new +mage,./ ''indico la G(< de la imagen img.src = -logoBdesarrolloweb.gi -/ ''de ino el evento onload del ob1eto imagen img.onload = unction,.7 ''inclu*o la imagen en el canvas ctx.draw+mage,img! 10! 10./ ; ; ; <'script> <'head> <bod*> <canvas id="micanvas" width="200" height="100"> =u navegador no soporta canvas. <'canvas> <'bod*> <'html>
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.
Artculo por
1.2.- Maneras de a anvas
eder a o#'etos Image "ara mostrar en el
4tro ejemplo de dibujo en con el AP de canvas del HTML 5, en el que incluimos im&'enes tra1das por di%erentes v1as posibles con Javascript! 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: )*+ ,raerse una i-a&en que $a% en la p'&ina# por medio del m(todo %etElement7'6d24, en#iando como par)metro el identificador de la eti"ueta 6M; de la ima%en deseada.
''$reo un ob1eto +mage con una imagen de la pagina var img = document.getElement)*+d,"im1"./ ''luego la dibu1o en el canvas ctx.draw+mage,img! 10! 10./
.*+ A trav/s del Arra% de i-a&es# 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.
''consigo una imagen desde el arra* de im8genes ctx.draw+mage,document.imagesR1S! 122! 20./

37
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 0*+ Creando nuestro ob1eto !-a&e# >ue es la forma con la "ue traba&amos en el artculo anterior. L por tanto no #amos a repetir las e plicaciones.
''un ob1eto +mage var imagen = new +mage,./ imagen.src = "httpQ''www.desarrolloweb.com'images'iconos'userEgo.png"/ imagen.onload = unction,.7 ctx.draw+mage,imagen! ??0! 1D3./ ;
2*+ Especificar la i-a&en en for-ato data#url# "ue es una cadena de caracteres en formato 7aseO, "ue permite especificar elementos como im)%enes a partir de c$di%o, pero como si esos elementos los ad"uiri(semos remotamente.
''a travYs de un "dataQ url" var img = new +mage,./ img.src = -dataQimage'gi /base>F!(0lZ&2lh$w0<0+000000?pn'[iJ3)0E000E0<000000<00s000+Gh0@hAcu&FlmPMindo:5*r+WiZ )U0&w==-/ ctx.draw+mage,img! ?00! 200./
3*+ Acceder a el dise4o dibu1ado en otro canvas# para mostrar en un can#as el contenido de otro, como si fuera una ima%en.
''consigo una imagen desde un canvas var img$anvas = document.getElement)*+d,"canvas2"./ ctx.draw+mage,img$anvas! 100! 120./
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.
1.2.1.- &'em"lo om"leto de tra#a'o en anvas on imgenes de varias ,uentes

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.
<L2&$=UPE J=H< PG)<+$ "B''V?$''2=2 J=H< F.01''EP" "httpQ''www.w?.org'=('htmlF'strict.dtd" > <html> <head> <title>+m8genes en $anvas<'title> <script language="1avascript"> unction carga$ontexto$anvas,id$anvas.7 var elemento = document.getElement)*+d,id$anvas./ i ,elemento 66 elemento.get$ontext.7 var contexto = elemento.get$ontext,-2d-./ i ,contexto.7 return contexto/ ; ; return alse/ ; window.onload = unction,.7
''cargo un camino en un canvas! para luego traerlo como imagen var ctx = carga$ontexto$anvas,-canvas2-./ i ,ctx.7 ctx. ill%t*le = -9DD0000-/ ctx.beginPath,./ ctx.move=o,30!13./ ctx.line=o,112!13./ ctx.line=o,1F?!>D./ ctx.line=o,112!12?./ ctx.line=o,30!12?./ ctx.line=o,1D!>D./

38

ctx.closePath,./ ctx. ill,./
''(ecibimos el elemento canvas var ctx = carga$ontexto$anvas,-micanvas-./ i ,ctx.7 ''$reo un ob1eto +mage con una imagen de la pagina var img = document.getElement)*+d,"im1"./ ctx.draw+mage,img! 10! 10./ ''consigo una imagen desde el arra* de im8genes ctx.draw+mage,document.imagesR1S! 122! 20./ ''consigo una imagen desde un canvas var img$anvas = document.getElement)*+d,"canvas2"./ ctx.draw+mage,img$anvas! 100! 120./ ''un ob1eto +mage var imagen = new +mage,./ imagen.src = "httpQ''www.desarrolloweb.com'images'iconos'userEgo.png"/ imagen.onload = unction,.7 ctx.draw+mage,imagen! ??0! 1D3./ ; ''a travYs de un "dataQ url" var img = new +mage,./ img.src = -dataQimage'gi /base>F!(0lZ&2lh$w0<0+000000?pn'[iJ3)0E000E0<000000<00s000+Gh0@hAcu&FlmPMindo:5*r+WiZ )U0&w==-/ ctx.draw+mage,img! ?00! 200./ ; document.imagesR1S.src = -dataQimage'gi /base>F!(0lZ&2lh$w0<0+000000?pn'[iJ3)0E000E0<000000<00s000+Gh0@hAcu&FlmPMindo:5*r+WiZ )U0&w==-/ ; <'script> <'head> <bod*> <h2>$anvas 5ue esto* creando con una serie de im8genes<'h2> <canvas id="micanvas" width="300" height="F00"> =u navegador no soporta canvas. <'canvas> <p> <div st*le="displa*Q none/"> <h2>$osas 5ue pongo a5uC para acceder desde Xavascript<'h2> <img src="canvasBhtml3.png" id="im1"> <img src="logoBgrande.1pg"> <p> <canvas id="canvas2" width="130" height="130"> (ecicla tu navegadorLL <'canvas> <'div> <'bod*> <'html>
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.
Artculo por

39
1.%.- &s alado 2 re orte en imgenes en anvas

0scalado y recorte de im&'enes en el elemento canvas! Como cambiar el tama5o y recortar las im&'enes al dibujarlas en el lienzo de canvas del HTML 5! 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.
1.%.1.- &s alar una imagen

@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:
draw+mage,imagen! posW! posU! anchura! altura./
Este m(todo dibu&ar) la ima%en en la posici$n definida por las coordenadas 2pos-, posL4 ' 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:
var ctx = carga$ontexto$anvas,-micanvas-./ i ,ctx.7 ''$reo una imagen conun ob1eto +mage de Xavascript var img = new +mage,./ ''indico la G(< de la imagen img.src = -logoBdesarrolloweb.gi -/ ''de ino el evento onload del ob1eto imagen img.onload = unction,.7 ''inclu*o la imagen en el canvas escala mu* pe5ue\a ctx.draw+mage,img! 0! 0! 30 ! 2F./ ''un poco ma*or ctx.draw+mage,img! :0! 10! N0 ! ?N./ ''tama\o natural ctx.draw+mage,img! 1>0! 20./ ; ;
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.
1.%.2.- -e ortar 2 es alar una imagen

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:

40

draw+mage,imagen! imgW! imgU! img0ncho! img0lto! lien"oW! lien"oU! <ien"o0ncho! <ien"o0lto.
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.
var ctx = carga$ontexto$anvas,-micanvas-./ i ,ctx.7 ''$reo una imagen conun ob1eto +mage de Xavascript var img = new +mage,./ ''indico la G(< de la imagen img.src = -sagradaB amilia.1pg-/ ''de ino el evento onload del ob1eto imagen img.onload = unction,.7 ctx.draw+mage,img! 1::! 11! 120 ! 2?F! 10! 10! D0! 1:>./ ''tama\o natural ctx.draw+mage,img! 1>0! 20./ ; ;
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.
Artculo por

41

Manual de Canvas Del HTML 5

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual de Canvas Del HTML 5

Uploaded by

Copyright:

Available Formats

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.

Manual de Canvas del HTML 5

Autores del manual

Director de DesarrolloWeb.com http://www.desarrolloweb.com (18 captulos)

Manual de Canvas del HTML 5: http://www.desarrolloweb.com/manuales/manual-canvas-html5.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

1.1.1.- Cundo estar listo HTML 5

Manual de Canvas del HTML 5: http://www.desarrolloweb.com/manuales/manual-canvas-html5.html

1.1.2.- Cules son las novedades de HTML 5

Miguel Angel Alvarez

Manual de Canvas del HTML 5: http://www.desarrolloweb.com/manuales/manual-canvas-html5.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

i!n a Canvas del HTML 5

1.2.1.- Com"ati#ilidad de anvas

1.2.2.- $olmi a "or la "ro"iedad intele tual de Canvas

1.2.%.- A"li a iones de uso de Canvas

Manual de Canvas del HTML 5: http://www.desarrolloweb.com/manuales/manual-canvas-html5.html

Miguel Angel Alvarez

Primeros pasos con el elemento Canvas

2.1.- &'em"lo de di#u'o on el A$I de anvas

2.1.1.- Colo ar el elemento HTML anvas

Manual de Canvas del HTML 5: http://www.desarrolloweb.com/manuales/manual-canvas-html5.html

2.1.2.- $intar en un anvas mediante (avas ri"t

Manual de Canvas del HTML 5: http://www.desarrolloweb.com/manuales/manual-canvas-html5.html

El c$di%o completo de nuestro primer e&emplo de uso de can#as sera el si%uiente:

5odemos #er el e&emplo en marc+a en una p)%ina aparte.

Miguel Angel Alvarez

2.2.- &ntender el lienzo de anvas

Manual de Canvas del HTML 5: http://www.desarrolloweb.com/manuales/manual-canvas-html5.html

2.2.1.- &'e de oordenadas del anvas

Manual de Canvas del HTML 5: http://www.desarrolloweb.com/manuales/manual-canvas-html5.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

2.2.2.- )egundo e'em"lo de tra#a'o on anvas

Manual de Canvas del HTML 5: http://www.desarrolloweb.com/manuales/manual-canvas-html5.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Miguel Angel Alvarez

2.%.- *i#u'ar re tngulos en un Canvas

2.%.1.- +un i!n ,ill-e t./

Manual de Canvas del HTML 5: http://www.desarrolloweb.com/manuales/manual-canvas-html5.html

5or e&emplo, #eamos el si%uiente c$di%o:

2.%.2.- +un i!n stro0e-e t./

2.%.%.- +un i!n lear-e t./

2.%.1.- &'em"lo de rea i!n de re tngulos en anvas

Manual de Canvas del HTML 5: http://www.desarrolloweb.com/manuales/manual-canvas-html5.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Manual de Canvas del HTML 5: http://www.desarrolloweb.com/manuales/manual-canvas-html5.html

Miguel Angel Alvarez

2.1.- Tra#a'ando on olor de relleno 2 de trazado en anvas

2.1.1.- Cam#iar el olor de relleno on ,ill)t2le

2.1.2.- Cam#iar el olor de trazado on stro0e)t2le

2.1.%.- 3tras nota iones "ara de,inir olores en anvas

Manual de Canvas del HTML 5: http://www.desarrolloweb.com/manuales/manual-canvas-html5.html

2.1.1.- &'em"lo "ara am#iar el olor de relleno

2.1.5.- &'em"lo "ara am#iar el olor del trazado

Manual de Canvas del HTML 5: http://www.desarrolloweb.com/manuales/manual-canvas-html5.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

El e&emplo cambiando esta funci$n se puede #er en una p)%ina aparte.

Miguel Angel Alvarez

Dibu ar caminos en Canvas

%.1.- Caminos en Canvas del HTML 5

%.1.1.- +un i!n #egin$at4./

Manual de Canvas del HTML 5: http://www.desarrolloweb.com/manuales/manual-canvas-html5.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

%.1.2.- +un i!n moveTo./