Manual Canvas Html5

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.
1
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" eplicamos 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 eplicar "u( es eactamente 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
2
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 Eplorer 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 eperimental 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: Eistir) 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, eistir)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 Miguel Angel Alvarez
3
1.2.- Introdui!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 Eplorer. La
:ltima #ersi$n del na#e%ador en el momento de escribir este artculo, 6nternet Eplorer A, no soporta can#as con funciones
nati#as, pero eisten 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, eiste el pro'ecto Eplorer Ban#as en el "ue se +a preparado un plu%in para
"ue Eplorer 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 Eplorer +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 eplorer,
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 Eplorer 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.- $olmia "or la "ro"iedad inteletual 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 eistencia 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"liaiones 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
4
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 ' eplicaremos c$mo podemos utili!ar nosotros mismos esta
nue#a +erramienta del HTML 5.
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 eplicamos "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.- Coloar 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 #ireox! $hrome! %aari u &pera.
<'canvas>
El elemento tiene apertura ' cierre ' entre medias podemos escribir un teto "ue ser) lo "ue #ean los usuarios "ue entren
5
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 (avasri"t
Eisten 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 conteto 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 conteto 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 conteto 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.
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
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
''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,.">
6
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>
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
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
''cambio el color de estilo de dibu1o a ro1o
''dibu1o otro rect8ngulo
;
;
;
<'script>
<'head>
<bod*>
Este texto se muestra para los navegadores no compatibles con canvas.
<br>
Por avor! utili"a #ireox! $hrome! %aari u &pera.
<'canvas>
<'bod*>
<'html>
5odemos #er el e&emplo en marc+a en una p)%ina aparte.
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
7
En este artculo #amos a eplicar 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 eacta 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 piel a la derec+a ' la '
con los piel +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:
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.
8
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 etraer el conteto 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 identiicador 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
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 conteto 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 eplicaremos 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>
i,contexto.7
return contexto/
;
;
return #0<%E/
;
9
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*>
=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.
2.%.- *i#u'ar retngulos 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
eplicamos 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 eplic$ 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 eplic$ 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 eplicar 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.- +uni!n ,ill-et./
Esta funci$n, perteneciente al ob&eto conteto 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
como color de relleno, "ue se indica con la propiedad fill9t'le del conteto 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 conteto 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 .<
peles 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 peles de alto ' anc+o, lue%o realmente son cuadrados.
2.%.2.- +uni!n stro0e-et./
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 peles 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 conteto
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.%.%.- +uni!n lear-et./
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 reai!n de retngulos 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>
i,contexto.7
11
return contexto/
;
;
return #0<%E/
;
i,contexto.7
''%i tengo el contexto

''cambio el color de relleno de los rect8ngulos
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 = -9DD??-/
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
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="9DD">
$ontenido 5ue s4lo ver8n los usuarios 5ue no soportan canvas en su navegador. Gsa una versi4n
moderna de #ireox! $hrome! %aari! &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%aBontetoBan#as24 'a la eplicamos en el anterior artculo ' la utili!amos para obtener el ob&eto de conteto
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 Eplorer, 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.
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 eperiencia sea la necesidad de traba&ar con el len%ua&e de pro%ramaci$n
12
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.
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 eisten dos atributos del conteto 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
Eiste un atributo del conteto 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 conteto 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 notaiones "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 eactamente los mismos. 5or e&emplo, podremos utili!ar estas
notaciones.
Bolor con nombre: "blue"
Bolor con @;7 +eadecimal, 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
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,inerior!superior.7
numPosibilidades = superior B inerior
aleat = Hath.random,. I numPosibilidades
aleat = Hath.loor,aleat.
return parse+nt,inerior. @ 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 "conteto", "ue es el conteto 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 conteto 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/
contexto = carga$ontexto$anvas,-micanvas-./
i,contexto.7
''%i tengo el contexto! deino 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.
Parte 3:
Dibuar 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 eplicar 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 eisten 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.- +uni!n #egin$at4./
Esta funci$n sir#e para decirle al conteto 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 conteto del can#as. Este ob&eto "ue mantiene el
conteto del can#as lo tenemos "ue etraer nosotros por medio de Ia#ascript, a partir del elemento can#as donde deseemos dibu&ar. B$mo
traba&ar ' etraer el conteto de un can#as fue 'a eplicado 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.- +uni!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.%.- +uni!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.- +uni!n ,ill./
Este m(todo del conteto 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
eplcitamente el m(todo close5at+24 para +acerlo nosotros 2close5at+24 lo eplicaremos en futuros artculos4.
%.1.5.- &'em"lo de amino senillo
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 conteto 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 conteto.
%.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
i,contexto.7
return contexto/
;
;
return #0<%E/
;
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*>
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.
%.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 eplicando 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 eplicar en Baminos en Ban#as del HTML 5.
17
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 conteto 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 eplicarlas detalladamente.
%.2.1.- +uni!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.- +uni!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, eplicado 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
conteto 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 disontinua
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
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>
i,contexto.7
return contexto/
;
;
return alse/
;
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*>
(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.
%.%.- 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 eplicamos 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:
.. Bamino relleno de color ' con el cierre de camino no eplcito.
1. Bamino relleno de otro color ' con el cierre de camino eplcito por medio de close5at+24.
H. 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 eplcito.
@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"l6ito
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 conteto 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 ill
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,./
;
%.%.2.- 2.- Camino relleno on ierre e8"l6ito
En esta se%unda #ariante del camino del +e)%ono tenemos un camino "ue s +emos cerrado eplcitamente con el m(todo
close5at+24. 9in embar%o, como fill24 'a se encar%aba de cerrar el camino por nosotros autom)ticamente, no eiste 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 conteto del can#as.
''Jexagono rellenado! cierre de camino explCcito con closePath
i,ctx.7
ctx.beginPath,./
ctx.move=o,30!13./
ctx.line=o,112!13./
ctx.line=o,1F?!>D./
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 eactamente 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 conteto 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,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 conteto 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,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.
%.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:
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 ill,.
ctx.ill,./

''creo un segundo camino
ctx.beginPath,./ ''probar a comentar esta lCnea para ver lo 5ue pasa
ctx.ill%t*le = -9NN00-/
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%aBontetoBan#as24 "ue 'a se +a eplicado 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$ eplcitamente 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:
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.
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 = -9NN00-/

''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
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 eplicaremos nue#as t(cnicas para +acer lneas cur#as ' no s$lo
lneas rectas como +asta a+ora.
%.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 epresar 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 epresar 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 eperimentado 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.
%.5.- *i#u'o de urvas on aros 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
En este artculo eplicaremos 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 conteto 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! anguloEinal! sentidoEcontrarioEdelErelo1.
Los par)metros , ' corresponden con las coordenadas del centro del arco.
El par)metro radio es el n:mero de peles "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< peles 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 aros
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
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 4aer este dise<o.
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.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%aBontetoBan#as24 o el HTML del elemento can#as, 'a las conocemos de di#ersos artculos anteriores del Manual de
Ban#as.
De todos modos pod(is #er el c$di%o fuente del e&ercicio, "ue se puede #er en marc+a de una p)%ina aparte.
%.=.- Curvas uadrtias 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 eplicamos los tipos de cur#as "ue podemos definir al dibu&ar
en el lien!o. @ecordemos "ue para epresar 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 inflei$n. 5or intentar eplicarlo con palabras de manera
entendible, podramos decir "ue las cur#as cuadr)ticas permiten epresar una :nica cur#atura entre dos puntos. 5ara
27
epresarlas 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 epresar 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 :uadratiCurveTo./ "ara di#u'ar urvas uadrtias
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 epresar 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 conteto 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 conteto 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 conteto 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 uadrtia
*+ora podemos #er un e&emplo de dibu&o en can#as de un camino "ue inclu'e dos cur#as cuadr)ticas.
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.
%.>.- -etngulos on es:uinas redondeadas en anvas9
interativo 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 teto 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.- +uni!n "ara rear un retngulo 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:
i,ctx.7
rounded(ect,ctx! 10! 10! 1?0! 110! 20./
29
;
%.>.2.- (avasri"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/
;
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 teto 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 teto.
%.>.%.- 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'eriio
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%aBontetoBan#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>
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/
;
i,ctx.7
ctx.clear(ect,0!0!130!130./
rounded(ect,ctx! 10! 10! 1?0! 110! radio./
;
;

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*>
(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.
%.?.- 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 inflei$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 conteto 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 eplicaciones 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
conteto 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 conteto 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.
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 conteto 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,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,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.
34
Parte !:
Trabao 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 eternos, 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 eplicaciones 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 conteto del can#as, con la
si%uiente sintais:
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
conteto 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 (avasri"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 eplicado 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:
img.src = -logoBgrande.1pg-/
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.
img.src = -canvasBhtml3.png-/
img.onload = unction,.7
;
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">
i,contexto.7
return contexto/
;
;
return #0<%E/
;
36
i,ctx.7
''$reo una imagen conun ob1eto +mage de Xavascript
''indico la G(< de la imagen
img.src = -logoBdesarrolloweb.gi-/
''deino el evento onload del ob1eto imagen
''inclu*o la imagen en el canvas
;
;
;
<'script>
<'head>
<bod*>
<'canvas>
<'bod*>
<'html>
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.
1.2.- Maneras de aeder a o#'etos Image "ara mostrar en el
anvas
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 eplicamos las %eneralidades del traba&o con ima%enes en el elemento can#as del HTML 5.
Bontinuando con esas eplicaciones #eremos a+ora c$mo pintar en un lien!o di#ersas im)%enes "ue etraemos de #arios
modos.
La idea es eperimentar con el dibu&o en Ban#as por medio de una nue#a pr)ctica ' a la #e! repasar todos los modos "ue
eisten de obtener una ima%en por medio de Ia#ascript, "ue 'a eplicamos en el artculo Distintas maneras de acceder a
ob&etos 6ma%e Ia#ascript.
Bomo 'a se eplic$ en el mencionado artculo, eisten 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
.*+ 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
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 eplicaciones.
''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"
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">
i,contexto.7
return contexto/
;
;
return alse/
;

''cargo un camino en un canvas! para luego traerlo como imagen
i,ctx.7
ctx.beginPath,./
ctx.move=o,30!13./
ctx.line=o,112!13./
ctx.line=o,1F?!>D./
ctx.line=o,30!12?./
ctx.line=o,1D!>D./
38
ctx.closePath,./
ctx.ill,./
;

i,ctx.7
''$reo un ob1eto +mage con una imagen de la pagina
var img = document.getElement)*+d,"im1"./

''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"
img.src =
)U0&w==-/
ctx.draw+mage,img! ?00! 200./
;

document.imagesR1S.src =
)U0&w==-/
;
<'script>
<'head>
<bod*>
<h2>$anvas 5ue esto* creando con una serie de im8genes<'h2>
<canvas id="micanvas" width="300" height="F00">
<'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.
39
1.%.- &salado 2 reorte 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 eplicaciones en el presente teto,
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
conteto 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.- &salar 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 conteto 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:
i,ctx.7
img.src = -logoBdesarrolloweb.gi-/
''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.- -eortar 2 esalar 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.
i,ctx.7
img.src = -sagradaBamilia.1pg-/
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.
41

Manual Canvas Html5

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Canvas Html5

Cargado por

Copyright:

Formatos disponibles

Tu mejor ayuda para aprender a hacer webs

También podría gustarte