P. 1
HTML Canvas

HTML Canvas

|Views: 2.569|Likes:
Publicado porER Tanito

More info:

Published by: ER Tanito on Sep 16, 2010
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOCX, PDF, TXT or read online from Scribd
See more
See less

06/26/2013

pdf

text

original

Sections

  • Cuándo estará listo HTML 5
  • Cuáles son las novedades de HTML 5
  • Compatibilidad de canvas
  • Polémica por la propiedad intelectual de Canvas
  • Aplicaciones de uso de Canvas
  • Colocar el elemento HTML canvas
  • Pintar en un canvas mediante Javascript
  • Eje de coordenadas del canvas
  • Segundo ejemplo de trabajo con canvas
  • Función fillRect()
  • Función strokeRect()
  • Función clearRect()
  • Ejemplo de creación de rectángulos en canvas
  • Cambiar el color de relleno con fillStyle
  • Cambiar el color de trazado con strokeStyle
  • Otras notaciones para definir colores en canvas
  • Ejemplo para cambiar el color de relleno
  • Ejemplo para cambiar el color del trazado
  • Función beginPath()
  • Función moveTo()
  • Función lineTo()
  • Función fill()
  • Ejemplo de camino sencillo
  • Código completo del ejemplo de camino
  • Función closePath()
  • Función stroke()
  • Ejemplo de camino con closePath() y stroke()
  • Ejemplo de línea discontinua
  • Ejemplo completo de dibujo de líneas con caminos en canvas
  • 1.- Camino relleno sin cierre explícito
  • 2.- Camino relleno con cierre explícito
  • 3.- Camino sin relleno y sin cierre
  • 4.- Camino sin relleno y con cierre
  • Primer ejemplo, pintar dos caminos distintos
  • Segundo ejemplo, un camino que pinta en dos lugares distintos
  • Entender los radianes
  • Ejemplo de dibujo de caminos con arcos
  • Veamos el código para hacer este diseño
  • Método quadraticCurveTo() para dibujar curvas cuadráticas
  • Ejemplo de curva cuadrática
  • Función para crear un rectángulo con esquinas redondeadas en
  • canvas
  • Javascript para cambiar el radio de las esquinas redondeadas
  • Código Mootools para el componente slider
  • Código completo del ejercicio
  • Método para dibujar curvas Bezier
  • Ejemplo de dibujo con curvas Bezier
  • Método drawImage() para pintar una imagen en el canvas
  • Objeto Javascript imagen
  • Ejemplo de dibujo de imagen en un canvas
  • Ejemplo completo de trabajo en canvas con imágenes de varias
  • fuentes
  • Escalar una imagen
  • Recortar y escalar una imagen

http://www.desarrolloweb.com/manuales/manual-canvas-html5.

html

Manual del elemento Canvas del HTML 5 en el que aprenderemos a dibuiar sobre los lienzos, utilizando
Javascript y el API de Canvas.

Listado de los capítulos
1.- Qué es HTML 5
Veremos que es HTML 5, su prevision de tiempo para convertirse en una especiIicacion recomendada y las
novedades mas signiIicativas que proporcionara. Entrar
2.- Introducción a Canvas del HTML 5
Canvas es uno de los componentes mas novedosos de estandar HTML 5 que sirve para dibuiar
dinamicamente imagenes en una pagina web. Entrar
3.- Ejemplo de dibujo con el API de canvas
Un primer eiemplo de dibuio en un elemento canvas de HTML 5 con el API de canvas y Javascript. Entrar
4.- Entender el lienzo de canvas
Veremos como es el lienzo de un canvas, Iormado por un eie de coordenadas que podemos utilizar para
posicionar todos los dibuios que queramos colocar en el canvas. Entrar
5.- Dibujar rectángulos en un Canvas
Como dibuiar cuadrados y rectangulos en un elemento Canvas de HTML mediante la Iuncion IillRect() y
strokeRect() de Javascript, valida en HTML 5. Entrar
6.- Trabajando con color de relleno y de trazado en canvas
Analisis de dos atributos esenciales para asignar color a los dibuios que se hacen en el elemento canvas.
Atributos IillStyle para el color de relleno y strokeStyle para el color de trazado. Entrar
7.- Caminos en Canvas del HTML 5
Veamos como realizar dibuios en un canvas con las Iunciones para caminos, que permiten la creacion de
estructuras mas compleias. Entrar
8.- Ejemplo 2 de dibujo de caminos en canvas
Segundo eiemplo sobre los caminos en el elemento canvas, donde veremos las Iunciones closePath() y
stroke(). Entrar
9.- Caminos en canvas: ejemplo 3
Como dibuiar un camino en canvas de HTML 5 con diversas variantes, cerrado y sin cerrar, y con o sin
relleno de color. Entrar
10.- Otros ejemplos de dibujo de caminos en elementos Canvas
En este articulo veremos otras pruebas de dibuio de caminos en los canvas. Entrar
11.- Curvas en caminos de Canvas del HTML 5
Los caminos en los elementos canvas del HTML 5 pueden tener curvas, que conseguimos por medio de los
arcos, las curvas cuadraticas y las curvas bezier. Entrar
12.- Dibujo de curvas con arcos en canvas
Como dibuiar arcos, para hacer curvas basadas en circunIerencias o segmentos de ellas, en el lienzo de los
elementos Canvas del HTML 5. Entrar
13.- Curvas cuadráticas en el canvas
Las curvas cuadraticas son un tipo especial de curva que se deIine por tres puntos, dos para el inicio y Iin de
la curva y otro para su tendencia. Entrar
14.- Rectángulos con esquinas redondeadas en canvas. interactivo con Mootools
Vemos las curvas cuadraticas a traves de un eiemplo interactivo de trabaio con caminos en canvas del
HTML 5 que dibuia rectangulos con esquinas redondeadas. Entrar
15.- Curvas Bezier en Canvas
Las curvas Bezier son la manera mas compleia de especiIicar dibuiar caminos curvos en el elemento canvas
del HTML 5. Entrar
16.- Usar imágenes en el Canvas
Dibuiar el contenido de imagenes en los elementos canvas del HTML 5, usando cualquier tipo de archivo
graIico permitido (giI, ipg, png) para incluir una imagen en el lienzo de un canvas. Entrar
17.- Maneras de acceder a objetos Image para mostrar en el canvas
Otro eiemplo de dibuio en con el API de canvas del HTML 5, en el que incluimos imagenes traidas por
diIerentes vias posibles con Javascript. Entrar
18.- Escalado y recorte en imágenes en canvas
Escalado y recorte de imagenes en el elemento canvas. Como cambiar el tamaño y recortar las imagenes al
dibuiarlas en el lienzo de canvas del HTML 5. Entrar



















'eremos qué es HTML 5. su previsión de tiempo para convertirse en una especificación
recomendada y las novedades más significativas que proporcionará.


En el articulo anterior publicado en DesarrolloWeb.com, "El Iuturo del desarrollo web: HTML 5"
explicamos las razones por las que es verdaderamente importante esta nueva version del lenguaie de
marcacion HTML y vimos quienes son los que estan llevando a cabo su especiIicacion.
Ahora convendria explicar que es exactamente HTML 5, ya que no es simplemente una nueva version del
lenguaie de marcacion HTML, sino una agrupacion de diversas especiIicaciones concernientes a el
desarrollo web. Es decir, HTML 5 no se limita solo a crear nuevas etiquetas, atributos y eliminar aquellas
marcas que estan en desuso o se utilizan inadecuadamente, sino que va mucho mas alla.
Asi pues, HTML 5 es una nueva version de diversas especiIicaciones, entre las que se encuentran:
O HTML 4
O HTML 1
O DOM Nivel 2 (DOM ÷ Document Obietc Model)
A la par, HTML 5 pretende proporcionar una plataIorma con la que desarrollar aplicaciones web mas
parecidas a las aplicaciones de escritorio, donde su eiecucion dentro de un navegador no implique Ialta de
recursos o Iacilidades para resolver las necesidades reales de los desarrolladores. Para ello se estan creando
unas APIs que permitan trabaiar con cualquiera de los elementos de la pagina y realizar acciones que hasta
hoy era necesario realizar por medio de tecnologias accesorias.
Estas API, que tendran que ser implementadas por los distintos navegadores del mercado, se estan
documentando con minuciosidad, para que todos los Browsers, creados por cualquier compañia las soporten
tal cual se han diseñado. Esto se hace con la intencion que no ocurra lo que viene sucediendo en el pasado,
que cada navegador hace la guerra por su parte y los que acaban pagandolo son los desarrolladores y a la
postre los usuarios, que tienen muchas posibilidades de acceder a webs que no son compatibles con su
navegador preIerido.
Cuándo estará listo HTML 5
Segun inIorman en la pagina de la organizacion WHATWG, HTML 5 se preve este listo como
especiIicacion de implementacion recomendada en el 2012. ¿Quiere esto decir que vamos a tener que
esperar hasta 2012 para aprovechar las ventaias de HTML 5? realmente no es iustamente asi, puesto que
algunos navegadores ya implementan muchas de las caracteristicas del moderno lenguaie.
Resulta que HTML 5 esta Iormado por muchos modulos distintos, cuyo grado de especiIicacion esta en
niveles dispares. Por tanto, muchas de las caracteristicas de HTML 5 estan ya listas para ser implementadas,
en un punto de desarrollo que se encuentra cercano al que Iinalmente sera presentado. Otras muchas
caracteristicas estan todavia simplemente en el tintero, a modo de ideas o borradores iniciales.
De hecho, las versiones mas nuevas de casi todos los navegadores, incluido el polemico Internet Explorer 8,
implementan algunas de las caracteristicas de HTML 5. Claro que, para que una web se vea bien en todos
los sistemas, hay que utilizar solo aquellas partes que Iuncionan en todos los navegadores, por lo que a dia
de hoy, pocas son las utilidades realmente disponibles del lenguaie, si queremos hacer un sitio web
compatible. No obstante, en el peor de los casos, podemos empezar a usar a nivel experimental estas
caracteristicas, aunque solo sea para Irotarnos las manos en espera de incorporarlas realmente en nuestras
practicas de desarrollo habituales.

Cuáles son las novedades de HTML 5
HTML 5 incluye novedades signiIicativas en diversos ambitos. Como deciamos, no solo se trata de
incorporar nuevas etiquetas o eliminar otras, sino que supone meioras en areas que hasta ahora quedaban
Iuera del lenguaie y para las que se necesitaba utilizar otras tecnologias.
O Estructura del cuerpo: La mayoria de las webs tienen un Iormato comun, Iormado por elementos
como cabecera, pie, navegadores, etc. HTML 5 permite agrupar todas estas partes de una web en
nuevas etiquetas que representaran cada uno de las partes tipicas de una pagina.
O Etiquetas para contenido específico: Hasta ahora se utilizaba una unica etiqueta para incorporar
diversos tipos de contenido enriquecido, como animaciones Flash o video. Ahora se utilizaran
etiquetas especiIicas para cada tipo de contenido en particular, como audio, video, etc.
O Canvas: es un nuevo componente que permitira dibuiar, por medio de las Iunciones de un API, en la
pagina todo tipo de Iormas, que podran estar animadas y responder a interaccion del usuario. Es algo
asi como las posibilidades que nos oIrece Flash, pero dentro de la especiIicacion del HTML y sin la
necesidad de tener instalado ningun plugin. Puedes conocer mas sobre este nuevo elemento en el
manual de canvas que estamos creando en DesarrolloWeb.com
O Bases de datos locales: el navegador permitira el uso de una base de datos local, con la que se podra
trabaiar en una pagina web por medio del cliente y a traves de un API. Es algo asi como las Cookies,
pero pensadas para almacenar grandes cantidades de inIormacion, lo que permitira la creacion de
aplicaciones web que Iuncionen sin necesidad de estar conectados a Internet.
O eb orkers: son procesos que requieren bastante tiempo de procesamiento por parte del
navegador, pero que se podran realizar en un segundo plano, para que el usuario no tenga que esperar
que se terminen para empezar a usar la pagina. Para ello se dispondra tambien de un API para el
trabaio con los Web Workers.
O Aplicaciones web Offline: Existira otro API para el trabaio con aplicaciones web, que se podran
desarrollar de modo que Iuncionen tambien en local y sin estar conectados a Internet.
O eolocalización: Las paginas web se podran localizar geograIicamente por medio de un API que
permita la Geolocalizacion.
O uevas APIs para interfaz de usuario: temas tan utilizados como el "drag & drop" (arrastrar y
soltar) en las interIaces de usuario de los programas convencionales, seran incorporadas al HTML 5
por medio de un API.
O in de las etiquetas de presentación: todas las etiquetas que tienen que ver con la presentacion del
documento, es decir, que modiIican estilos de la pagina, seran eliminadas. La responsabilidad de
deIinir el aspecto de una web correra a cargo unicamente de CSS.
Como se puede ver, existiran varios API con los que podremos trabaiar para el desarrollo de todo tipo de
aplicaciones compleias, que Iuncionaran online y oIIline. Quizas se entienda meior por que HTML 5 es un
proyecto tan ambicioso y que esta llevando tanto tiempo para ser elaborado.









Canvas es uno de |os componentes más novedosos de estándar n1ML 5 que s|rve para
d|bu[ar d|nám|camente |mágenes en una pág|na webŦ
Þor M|gue| Ange| A|varez
Atenc|ónť ConLenldo excluslvo de uesarrolloWebŦcomŦ no reproduclrŦ CopvrlahLŦ
P1ML 3 vlene con varlas novedades lnLeresanLes v una de las que podemos empezar a probar va es el CanvasŦ
Canvas slanlflca en espanol alao asl como llenzo v es báslcamenLe esoţ un área donde podemos dlbu[ar como sl fuera
un llenzoŦ
El elemento canvas permite especiIicar un area de la pagina donde se puede, a traves de scripts, dibuiar y
renderizar imagenes, lo que amplia notablemente las posibilidades de las paginas dinamicas y permite hacer
cosas que hasta ahora estaban reservadas a los desarrolladores en Flash, con la ventaia que para usar canvas
no sera necesario ningun plugin en el navegador, lo que meiorara la disponibilidad de esta nueva aplicacion.
En este articulo y los siguientes pretendemos dar una introduccion a canvas, para los lectores de
DesarrolloWeb.com interesados en conocer de cerca esta nueva utilidad de HTML 5. Al menos esperamos
dar a conocer las posibilidades del canvas y oIrecer algunos eiemplos que se puedan probar ya en los
navegadores mas modernos.
Compatibilidad de canvas
l canvas se desarrolló lnlclalmenLe por Apple para su naveaador Safarl v lueao fue uLlllzado v esLandarlzado por la
oraanlzaclón WPA1WC para lncorporarlo a P1ML 3Ŧ ÞosLerlormenLe Lamblen ha sldo adopLado por naveaadores
como llrefox v CperaŦ
Por lo que respecta a Chorme, es un navegador que utiliza el mismo motor de renderizado que SaIari, por lo
que tambien soporta el elemento Canvas.
De entre los navegadores mas habituales solo nos queda por soportar canvas el siempre polemico Internet
Explorer. La ultima version del navegador en el momento de escribir este articulo, Internet Explorer 8, no
soporta canvas con Iunciones nativas, pero existen diversos proyectos y plugins que pueden ampliar las
Iuncionalidades del navegador para dar soporte a este nuevo elemento del HTML 5. Por eiemplo, existe el
proyecto Explorer Canvas en el que se ha preparado un plugin para que Explorer soporte el dibuio 2d que
permite canvas.
Sin embargo, aunque en diversos Irentes se ha comenzado a utilizar Canvas, la Ialta de soporte de Explorer
hace que todavia no sea muy recomendable su incorporacion a las aplicaciones web, ya que la mayoria de
los usuarios, que utilizan explorer, no podrian ver las partes de la pagina donde se utiliza canvas. Esta
situacion se espera que cambie durante los proximos meses o años, puesto que la incorporacion de canvas al
HTML 5 ya es una realidad e Internet Explorer mas tarde o temprano tendra que dar soporte esta utilidad en
su navegador, si no quiere que se descarte su utilizacion por parte de los usuarios que deseen acceder a los
servicios web mas avanzados.
Polémica por la propiedad intelectual de Canvas
Dno de los problemas de canvas es que se creó ba[o propledad lnLelecLual de Appleţ es declr que dlcha empresa era
la creadora de la lnaenlerla que daba soporLe a esLe nuevo elemenLo v por LanLo se enconLraba ba[o paLenLes de la
companlaŦ sLe hechoţ anadldo a la exlsLencla de un formaLo ablerLo que slrve para hacer cosas slmllares como es el
SvCţ hlzo que suralera una polemlca sobre la acepLaclón de esLe elemenLo en el nuevo esLándar del P1ML 3Ŧ
AIortunadamente Apple abrio la licencia de uso de patente, liberando la propiedad intelectual de la misma,
condicion estrictamente necesaria para que la W3C, que siempre apoya patentes libres, incorporase
Iinalmente canvas dentro del nuevo estandar del lenguaie HTML.
Aplicaciones de uso de Canvas
Canvas permlLe dlbu[ar en la páalna v acLuallzar dlnámlcamenLe esLos dlbu[osţ por medlo de scrlpLs v aLendlendo a
las acclones del usuarloŦ 1odo esLo da unas poslbllldades de uso Lan arandes como las que dlsponemos con el plualn
de llashţ en lo que respecLa a renderlzaclón de conLenldos dlnámlcosŦ Las apllcaclones pueden ser arandes como
podamos lmaalnarţ desde [ueaosţ efecLos dlnámlcos en lnLerfaces de usuarloţ edlLores de códlaoţ edlLores aráflcosţ
apllcaclonesţ efecLos 3uţ eLcŦ
Actualmente algunas de las aplicaciones mas novedosas para para la web utilizan ya canvas para su
Iuncionamiento, donde se puede destacar Bespin, un editor de codigo de Mozilla, o Google Wave. En la
entrada de la Wiki sobre Canvas podemos encontrar diversos enlaces a sitios web con eiemplos de uso de
este elemento del HTML 5.
En los siguientes articulos veremos eiemplos de uso de canvas y explicaremos como podemos utilizar
nosotros mismos esta nueva herramienta del HTML 5.



















Dn pr|mer e[emp|o de d|bu[o en un e|emento canvas de n1ML 5 con e| AÞI de canvas y
Iavascr|ptŦ

n el arLlculo anLerlor expllcamos que era el elemenLo canvas del P1ML 3ţ asl que podemos pasar a ver un prlmer
e[emplo de uLlllzaclón del mlsmo para que los lecLores de uesarrolloWebŦcom puedan lr conoclendo esLe nuevo
slsLemaŦ
Para comenzar realizaremos un eiemplo de dibuio de dos rectangulos con distintos colores, que realizaremos
utilizando el un par de Iunciones del API de dibuio en canvas mediante Javascript. Claro que el elemento
canvas tiene muchas cosas que debemos conocer para ir soltandonos en su maneio, pero al menos podremos
ver una primera prueba para ir abriendo boca.
El eiemplo se basa en dos partes, primero una en la que colocaremos un lienzo canvas en un lugar de nuestra
pagina, con la etiqueta HTML "CANVAS" y luego otra parte en la que dibuiaremos dentro de ese elemento
los rectangulos con programacion Javascript. Sobra decir que haran Ialta unos conocimientos al menos
basicos de Javascript para poder trabaiar con el canvas.
Colocar el elemento HTML canvas
Ahora comencemos slLuando denLro del cuerpo de la páalna la eLlqueLa CAnvASŦ sLa eLlqueLaţ como declamos
forma parLe del esLándar del P1ML 3Ŧ
canvas id÷"micanvas" width÷"200" height÷"100"~
Este texto se muestra para los navegadores no compatibles con canvas.
br~
Por Iavor, utiliza FireIox, Chrome, SaIari u Opera.
/canvas~
El elemento tiene apertura y cierre y entre medias podemos escribir un texto que sera lo que vean los
usuarios que entren con navegadores que no soporten la etiqueta CANVAS.
Para especiIicar las caracteristicas de este canvas tenemos varios atributos:
Atributo id:
Para asignarle un nombre unico y luego reIerirnos a este canvas desde Javascript.
Atributos width y height:
Para indicar la anchura y altura del area del canvas.
Otros atributos se pueden colocar de manera opcional, como por eiemplo style, para indicar atributos de
hoias de estilo para deIinir el aspecto del lienzo.
Pintar en un canvas mediante 1avascript
xlsLen dlversas funclones va llsLas para dlbu[ar formas v Lrazados en un canvasŦ nosoLros podemos comblnarlas
para hacer dlbu[os más comple[osŦ Þero en esLe caso vamos a empezar dlbu[ando un par de senclllas formasŦ no
obsLanLeţ como veremos Lamblenţ debemos hacer anLes unas comprobaclones para saber sl el naveaador que esLá
e[ecuLando esLa páalna es compaLlble con canvasŦ
Inicialmente el canvas esta en blanco y cuando queremos pintar sobre el tenemos que acceder al contexto de
renderizado del canvas, sobre el que podremos invocar distintos metodos para acceder a las Iunciones de
dibuio. El proceso simpliIicado seria el siguiente:
//Recibimos el elemento canvas
var canvas ÷ document.getElementById('micanvas');

//Accedo al contexto de '2d' de este canvas, necesario para dibuiar
var contexto ÷ canvas.getContext('2d');

//Dibuio en el contexto del canvas
contexto.IillRect(50, 0, 10, 150);
Primero con el metodo getElementById() obtengo el elemento de la pagina que se pasa como parametro, que
es el canvas. Luego accedo al contexto 2D del canvas, que es el que tiene varios metodos que sirven para
dibuiar en el lienzo. Por ultimo puedo eiecutar tantos metodos como desee sobre el contexto del canvas para
pintar elementos en el lienzo.
Como decia, estas sentencias Javascript no son compatibles con todos los navegadores, por lo que habra que
hacer unas comprobaciones basicas, para saber si eiecutar o no las distintas instrucciones de dibuio.Veamos
este codigo, un poco mas elaborado, que hace las comprobaciones necesarias para no hacer nada en el caso
que el navegador no sea compatible con canvas.
//Recibimos el elemento canvas
var elemento ÷ document.getElementById('micanvas');
//Comprobacion sobre si encontramos un elemento
//y podemos extraer su contexto con getContext(), que indica compatibilidad con canvas
iI (elemento && elemento.getContext) ¦
//Accedo al contexto de '2d' de este canvas, necesario para dibuiar
var contexto ÷ elemento.getContext('2d');
iI (contexto) ¦
//Si tengo el contexto 2d es que todo ha ido bien y puedo empezar a dibuiar
//Comienzo dibuiando un rectangulo
contexto.IillRect(0, 0, 150, 100);
//cambio el color de estilo de dibuio a roio
contexto.IillStyle ÷ '#cc0000';
//dibuio otro rectangulo
contexto.IillRect(10, 10, 100, 70);
}
}
El codigo esta comentado para que se pueda entender mas Iacilmente.
Ahora solo Ialta una ultima cosa, que es eiecutar estas acciones solo cuando la pagina este cargada por
completo y lista para recibirlas. Esto lo conseguimos con la el evento onload del body de la pagina:
body onload÷"IuncionDeDibuio()"~
Claro que tendremos que crear la IuncionDeDibuio() con el codigo anterior para operar con el canvas.
O bien podemos utilizar este otro recurso para asignar el evento directamente desde un script Javascript:
window.onload ÷ Iunction()¦
//instrucciones de dibuio en canvas
}
El codigo completo de nuestro primer eiemplo de uso de canvas seria el siguiente:
html~
head~
title~Probando canvas/title~
script~
window.onload ÷ Iunction()¦
//Recibimos el elemento canvas
var elemento ÷ document.getElementById('micanvas');
//Comprobacion sobre si encontramos un elemento
//y podemos extraer su contexto con getContext(), que indica compatibilidad con canvas
iI (elemento && elemento.getContext) ¦
//Accedo al contexto de '2d' de este canvas, necesario para dibuiar
var contexto ÷ elemento.getContext('2d');
iI (contexto) ¦
//Si tengo el contexto 2d es que todo ha ido bien y puedo empezar a dibuiar en el canvas
//Comienzo dibuiando un rectangulo
contexto.IillRect(0, 0, 150, 100);
//cambio el color de estilo de dibuio a roio
contexto.IillStyle ÷ '#cc0000';
//dibuio otro rectangulo
contexto.IillRect(10, 10, 100, 70);
}
}
}

/script~
/head~

body~

canvas id÷"micanvas" width÷"200" height÷"100"~
Este texto se muestra para los navegadores no compatibles con canvas.
br~
Por Iavor, utiliza FireIox, Chrome, SaIari u Opera.
/canvas~

/body~
/html~
Podemos ver el eiemplo en marcha en una pagina aparte.







'eremos cómo es el lienzo de un canvas. formado por un eje de coordenadas que
podemos utilizar para posicionar todos los dibujos que queramos colocar en el canvas.

Seguimos dando nuestros primeros pasos en el elemento canvas del HTML 5. Recordemos que en el anterior
articulo vimos un primer eiemplo de dibuio en un canvas, asi que ya tenemos una idea de las partes que
integran el proceso para hacer un dibuio en el canvas:
O Colocar la etiqueta CANVAS en el cuerpo de la pagina
O Dibuiar en el canvas utilizando un script en Javascript
En este articulo vamos a explicar las caracteristicas de nuestro lienzo y las coordenadas con las que podemos
movernos por el y realizar dibuios.
Eje de coordenadas del canvas
Para posicionar elementos en el canvas tenemos que tener en cuenta su eie de coordenadas en dos
dimensiones, que comienza en la esquina superior izquierda del lienzo.
El lienzo producido por canvas tendra unas dimensiones indicadas con los atributos width y height en la
etiqueta CANVAS. Por tanto, la esquina superior izquierda sera el punto (0,0) y la esquina inIerior derecha
el punto deIinido por (width-1,height-1), osea, el punto maximo de coordenadas marcado por su anchura y
altura.
ota: Hemos indicado que el punto de la esquina inIerior derecha es (width-1,height-1) porque las
coordenadas comienzan en (0,0), luego la coordenada Iinal en anchura y altura sera 1 menos el tamaño
maximo de width y height deIinido en la etiqueta CANVAS. Por eiemplo, si la anchura es 50 y la altura es
100, entonces las coordenadas van desde (0,0) hasta (49,99).
Podemos ver el siguiente diagrama para tener una idea exacta de las dimensiones y coordenadas en un
canvas.


Cualquier punto dentro del canvas se calcula con la coordenada (x,y), siendo que la x crece segun los pixel a
la derecha y la y con los pixel hacia abaio.
Para dibuiar cualquier tipo de Iorma en el canvas necesitaremos posicionarla con respecto a las coordenadas
que acabamos de ver. En el eiemplo del articulo anterior, vimos que para dibuiar un rectangulo necesitamos
varios valores:
contexto.IillRect(10, 10, 100, 70);
Los dos primeros parametros eran las coordenadas x e y de la esquina superior izquierda del rectangulo. Los
dos ultimos parametros son los valores de anchura y altura del mismo.
Pero hay otras Iormas que se pueden dibuiar en un canvas que requieren el uso de metodos con un poco mas
elaborados que el dibuio de un rectangulo. Lo veremos mas adelante.
$egundo ejemplo de trabajo con canvas
Para seguir Iamiliarizandonos con el elemento canvas y el procedimiento de dibuio mediante Javascript
vamos a ver un segundo eiemplo, tambien sencillo.
Vimos que parte del codigo Javascript necesario era para realizar las comprobaciones pertinentes a Iin de
asegurarnos que el navegador es compatible con canvas cuando queremos extraer el contexto del canvas
antes de empezar a dibuiar. En este eiemplo realizaremos una Iuncion para resumir estas tareas que
podremos utilizar a lo largo de este manual.
//Recibe un identiIicador del elemento canvas y carga el canvas
//Devueve el contexto del canvas o FALSE si no ha podido conseguise
Iunction cargaContextoCanvas(idCanvas)¦
var elemento ÷ document.getElementById(idCanvas);
iI(elemento && elemento.getContext)¦
var contexto ÷ elemento.getContext('2d');
iI(contexto)¦
return contexto;
}
}
return FALSE;
}
Podremos invocar esta Iuncion y evaluar su resultado para saber si se obtuvo o no el contexto del canvas.
var contexto ÷ cargaContextoCanvas('micanvas');
iI(contexto)¦
//Tengo el contexto, entonces dibuio sobre el canvas
}
En este eiemplo vamos a dibuiar un par de rectangulos, uno azul y otro amarillo. Ya vimos en el anterior
eiemplo como se hacian Iormas rectangulares y tambien aprendimos a cambiar el color de la Iorma. Para
mostrar otra de las posibilidades del canvas vamos a mostrar como hacer un color semitransparente.
//cambio el color de dibuio a azul
contexto.IillStyle ÷ '#6666II';
//dibuio un rectangulo azul
contexto.IillRect(10,10,50,50);
//cambio el color a amarillo con un poco de transparencia
contexto.IillStyle ÷ 'rgba(255,255,0,0.7)';
//pinto un rectangulo amarillo semitransparente
contexto.IillRect(35,35,50,50);
Si nos Iiiamos, cuando se cambio el color a amarillo se especiIico el color con RGBA, esto signiIica que
estamos indicando tambien el canal Alpha, que indica el grado de transparencia desde 0 (totalmente
transparente) a 1 (totalmente opaco).
Aclarmos de cualquier Iorma que todas estas Iunciones de dibuio las explicaremos con detenimiento mas
adelante.
El codigo completo de este segundo eiemplo se puede ver a continuacion:
html~
head~
title~Canvas segundo eiemplo/title~

script~
//Recibe un identiIicador del elemento canvas y carga el canvas
//Devueve el contexto del canvas o FALSE si no ha podido conseguise
Iunction cargaContextoCanvas(idCanvas)¦
var elemento ÷ document.getElementById(idCanvas);
iI(elemento && elemento.getContext)¦
var contexto ÷ elemento.getContext('2d');
iI(contexto)¦
return contexto;
}
}
return FALSE;
}

window.onload ÷ Iunction()¦
//Recibimos el elemento canvas
var contexto ÷ cargaContextoCanvas('micanvas');
iI(contexto)¦
//Si tengo el contexto
//cambio el color de dibuio a azul
contexto.IillStyle ÷ '#6666II';
//dibuio un rectangulo azul
contexto.IillRect(10,10,50,50);
//cambio el color a amarillo con un poco de transparencia
contexto.IillStyle ÷ 'rgba(255,255,0,0.7)';
//pinto un rectangulo amarillo semitransparente
contexto.IillRect(35,35,50,50);
}
}

/script~

/head~

body~

canvas id÷"micanvas" width÷"100" height÷"100"~
Tu navegador no soporta canvas.
/canvas~

/body~
/html~
El eiemplo puede verse en marcha en una pagina aparte, pero tener en cuenta que hace Ialta disponer de
compatibilidad con canvas en vuestro navegador.


Cómo d|bu[ar cuadrados y rectángu|os en un e|emento Canvas de n1ML med|ante |a
func|ón f|||kect() y strokekect() de Iavascr|ptţ vá||da en n1ML 5Ŧ

Canvas es uno de los nuevos elemenLos dlsponlbles en P1ML 3ţ que slrve para dlbu[ar cosas en un llenzo de la
páalnaŦ ?a expllcamos esLe nuevo componenLe en anLerlores arLlculos de uesarrolloWebŦcomţ enLre los que
desLacamos la lnLroducclón a Canvas del P1ML 3Ŧ
Como ya se explico anteriormente, canvas es un elemento sobre el que dibuiamos por medio de sentencias
en el lenguaie de programacion Javascript. Sin embargo, por el momento todos los navegadores no son
compatibles con este nuevo componente, por lo que tendremos que hacer comprobaciones para no eiecutar
en los navegadores ninguna instruccion que pueda dar errores por problemas de compatibilidad. Esto
tambien se explico en el articulo Eiemplo de dibuio con el API de canvas y ademas se proIundizo un poco
en anterior articulo a este, cuya lectura tambien recomendamos, Entender el lienzo de canvas.
En este articulo vamos a explicar como podemos utilizar las Iunciones IillRect() y strokeRect() para dibuiar
rectangulos en la pagina y ademas vamos a implementar una pequeña interaccion por medio de un enlace,
que al pulsarlo eiecutara una Iuncion Javascript para borrar el contenido del canvas con la Iuncion
clearRect().
unción fillRect()
sLa funclónţ perLeneclenLe al ob[eLo conLexLo de un elemenLo canvasţ slrve para dlbu[ar recLánaulos rellenos de
colorŦ 8eclbe cuaLro parámeLrosţ con esLe esquemať
IillRect(x,y,anchura,altura)
Esto dibuia un rectangulo cuya esquina superior izquierda esta en el punto (x,y) y cuyas dimensiones son
altura x anchura.
El color de relleno no lo especiIicamos en la propia Iuncion, sino que es el color que se tenga conIigurado en
ese momento como color de relleno, que se indica con la propiedad IillStyle del contexto del canvas,
asignando por eiemplo el RGB de un color.
-otaťComo vlmos en el arLlculo nLender el llenzo de canvasţ anLes de e[ecuLar esLe meLodoţ neceslLamos acceder al
conLexLo de un canvasţ para lueao lnvocar al meLodo sobre ese ob[eLoŦ sLo lo vamos a dar por sabldo aqulţ v
recomendamos la lecLura del senalado arLlculo para las personas que Lenaan dudasŦ
Por eiemplo, veamos el siguiente codigo:
Ior (i÷0;i÷100;i¹÷10)¦
contexto.IillRect(i,i,5,5);
}
Esto dibuiaria una serie de rectangulos, comenzando en la posicion (0,0) y continuando con posiciones
siempre de 10 pixeles de distancia en ambas coordenadas: (10,10), (20,20) ... Acabando en la coordenada
(100,100). Todos los rectangulos seran de 5 pixeles de alto y ancho, luego realmente son cuadrados.
unción strokeRect()
sLa funclón slrve para dlbu[ar slmplemenLe la sllueLa de un recLánauloţ es declrţ sólo su bordeŦ l esquema de
parámeLros es el slaulenLeť
strokeRect(x,y,anchura,altura)
Dibuia el borde de un rectangulo comenzando en la posicion (x,y) para su esquina superior izquierda y con
las dimensiones de altura x anchura.
Ior (i÷100;i~÷0;i-÷10)¦
contexto.strokeRect(i,100-i,5,5);
}
Con el codigo anterior tambien dibuiamos una serie de cuadrados en el canvas, aunque en esta ocasion solo
la silueta sin estar rellenos de color, de 5 pixeles de anchura y altura y con distintas coordenadas que
producimos al hacer el bucle Ior.
De manera similar, para deIinir el color del borde del rectangulo, utilizamos la propiedad strokeStyle del
obieto del contexto del canvas, a la que podemos asignar el valor RGB que deseemos para el borde de los
cuadrados o aquello que vayamos a dibuiar en el canvas.
unción clearRect()
sLa funclón nos slrve para borrar áreas recLanaulares de un canvas v hacerlas LoLalmenLe LransparenLes o sln
conLenldo aráflcoŦ lunclona de manera slmllar a los recLánaulosť
clearRect(x,y,anchura,altura)
El color aqui no importa mucho, porque es simplemente el color del Iondo del contenedor HTML donde
hayamos colocado el canvas.
Ejemplo de creación de rectángulos en canvas
Ahora veamos un e[emplo de dlbu[o de recLánaulos en un canvasţ que uLlllza las funclones comenLadas
anLerlormenLeŦ
html~
head~
title~Canvas rectangulos/title~
script~
//Recibe un identiIicador del elemento canvas y carga el canvas
//Devueve el contexto del canvas o FALSE si no ha podido conseguise
Iunction cargaContextoCanvas(idCanvas)¦
var elemento ÷ document.getElementById(idCanvas);
iI(elemento && elemento.getContext)¦
var contexto ÷ elemento.getContext('2d');
iI(contexto)¦
return contexto;
}
}
return FALSE;
}

window.onload ÷ Iunction()¦
//Recibimos el elemento canvas
var contexto ÷ cargaContextoCanvas('micanvas');
iI(contexto)¦
//Si tengo el contexto

//cambio el color de relleno de los rectangulos
contexto.IillStyle ÷ '#cc0000';
Ior (i÷0;i÷100;i¹÷10)¦
// IillRect(x,y,width,height) dibuia un rectangulo relleno de color
contexto.IillRect(i,i,5,5);
}
//cambio el color de la linea de borde del rectangulo
contexto.strokeStyle ÷ '#II9933';
Ior (i÷100;i~÷0;i-÷10)¦
//strokeRect(x,y,width,height) dibuia el borde de un rectangulo
contexto.strokeRect(i,100-i,5,5);
}
}
}

Iunction borrarparcial()¦
var contexto ÷ cargaContextoCanvas('micanvas');
iI(contexto)¦
//clearRect(x,y,width,height) borra un area rectangular del canvas deiandola transparente
contexto.clearRect(60,0,42,150);
}
}

/script~

/head~

body bgcolor÷"#IIII99"~

canvas id÷"micanvas" width÷"150" height÷"150"~
Contenido que solo veran los usuarios que no soportan canvas en su navegador. Usa una version moderna de
FireIox, Chrome, SaIari, Opera... casi todos los navegadores excepto Explorer son compatibles con Canvas.
/canvas~
a hreI÷"#" onclick÷"borrarparcial()"~Borrado parcial/a~

/body~
/html~
La Iuncion cargaContextoCanvas() ya la explicamos en el anterior articulo y la utilizamos para obtener el
obieto de contexto del canvas, o Ialse en caso que el navegador no soporte el trabaio con canvas del HTML
5.
-otať lnLerneL xplorerţ al menos hasLa la verslón 8 no soporLa canvasţ lueao no será compaLlble con esLe e[emploŦ
En el evento window.onload deIinimos una serie de instrucciones que dibuiaran una serie de rectangulos
iusto cuando la pagina haya terminado de cargarse.
Con la Iuncion borrarparcial() simplemente borramos un area del canvas y a esta Iuncion se llama por
medio del evento onclick del enlace que hay en la parte de abaio del codigo.
Podemos ver el eiemplo en marc ha en una pagina aparte.
Esperamos que con estas indicaciones y el anterior eiemplo se haya podido entender correctamente el modo
de dibuiar rectangulos en un elemento Canvas del HTML 5. En Iuturos articulos veremos como dibuiar otros
tipos de Iormas. Quizas lo mas complicado para desarrolladores sin experiencia sea la necesidad de trabaiar
con el lenguaie de programacion Javascript, pero recordamos que en DesarrolloWeb.com puedes encontrar
una serie de manuales de Javascript que estan incluso al alcance de personas que no hayan programado
nunca.




























Análisis de dos atributos esenciales para asignar color a los dibujos que se hacen en el
elemento canvas. Atributos fill$tyle para el color de relleno y stroke$tyle para el color
de trazado.


Estamos aprendiendo acerca del elemento Canvas del HTML 5 y vamos a presentar un articulo que nos
servira para darle un toque personal a nuestros diseños utilizando un poco de color. En el anterior articulo
del Manual de Canvas del HTML 5 ya vimos un par de Iunciones para dibuio de rectangulos y ahora vamos
a estudiar un poco meior cuales son las posibilidades para darles color. De paso, este par de eiemplos
serviran para ilustrar un poco meior el esquema de trabaio con canvas.
Para trabaiar con color en los elementos canvas tenemos varias posibilidades, pero de momento vamos a
aprender a modiIicar el color con el que se rellena o se dibuia trazados. Como vimos anteriormente, al
dibuiar rectangulos, podemos elegir entre dibuiar solo su contorno o dibuiarlos rellenos de color (y luego
veremos que esto es asi con otros tipos de caminos). Ahora veremos que existen dos atributos del contexto
del canvas que sirven para deIinir el color de relleno y el color de trazado a la hora de dibuiar rectangulos u
otros caminos.
Cambiar el color de relleno con fill$tyle
Existe un atributo del contexto del canvas que almacena el color que se utilizara al rellenar elementos.
Cambiar el color de relleno es tan sencillo como asignarle valores distintos, de colores en RGB, con lo que
conseguiremos que la proxima vez que se rellene de color se haga con ese nuevo valor asignado.
ctx.IillStyle ÷ '#990000';
Suponiendo que tenemos el obieto contexto de un canvas en la variable ctx, con la anterior linea estamos
solicitando al elemento canvas que la proxima vez que se rellene el color se haga en roio oscuro.
Cambiar el color de trazado con stroke$tyle
Ahora bien, cuando dibuiamos podemos elegir hacer solo un trazado del rectangulo, u otro tipo de camino y
para ello se utilizara otro color que podemos deIinir con strokeStyle. El atributo strokeStyle Iunciona de la
misma manera que IillStyle, pero con la salvedad que servira para indicar el color del trazado.
ctx.strokeStyle ÷ '#000099';
Con esa linea estamos marcando que el color de trazado sea azul oscuro. Por lo cual, la proxima vez que se
haga un trazado la linea sera de ese color.
Otras notaciones para definir colores en canvas
Ahora podemos aprender como especiIicar colores en los elementos canvas. La verdad es que los que
conozcan CSS no tendran problema alguno para ello, ya que los Iormatos son exactamente los mismos. Por
eiemplo, podremos utilizar estas notaciones.
O Color con nombre: "blue"
O Color con RGB hexadecimal, como se deIine en HTML: "#II6600"
O Color con RGB en base decimal: "rgb(100, 25, 206)"
O Color RGBA (canal alpha o transparencia, como en CSS3): "rgba(255, 125, 0, 0.5)"
O Con RGB y porcentaie: "rgb(100°, 20°, 0)"
Nosotros podremos elegir la que mas nos convenga segun nuestro caso.
Ejemplo para cambiar el color de relleno
Veamos ahora un eiercicio que nos sirve de eiemplo para mostrar como cambiar el color de relleno. En
concreto vamos a rellenar el canvas con muchos cuadraditos de colores aleatorios y ademas haremos que
cada pocos instantes se vuelva a dibuiar el canvas con nuevos cuadraditos aleatorios, con lo que
generaremos nuestra primera y pequeña animacion.
Si lo deseas, antes de continuar la lectura, puede ser interesante ver el eiemplo en marcha.
Veamos antes que nada un par de Iunciones para conseguir un color aleatorio en Javascript. La primera nos
oIrece un numero aleatorio y la segunda, que se apoya en la primera, nos sirve para generar una cadena que
especiIica un color.
Iunction aleatorio(inIerior,superior)¦
numPosibilidades ÷ superior - inIerior
aleat ÷ Math.random() * numPosibilidades
aleat ÷ Math.Iloor(aleat)
return parseInt(inIerior) ¹ aleat
}
Iunction colorAleatorio()¦
return "rgb(" ¹ aleatorio(0,255) ¹ "," ¹ aleatorio(0,255) ¹ "," ¹ aleatorio(0,255) ¹ ")";
}
Ahora vamos a mostrar otra Iuncion para dibuiar el lienzo de un canvas, rellenando de cuadraditos con
colores aleatorios:
Iunction cuadradosAleatorios()¦
Ior(i÷0; i300; i¹÷10)¦
Ior(i÷0; i250; i¹÷10)¦
contexto.IillStyle ÷ colorAleatorio();
contexto.IillRect(i,i,10,10)
}
}
}
Como se puede ver, tenemos un bucle anidado, que realiza la tarea. En cada iteracion se obtiene un color
aleatorio y luego se pinta un rectangulo con ese color. La Iuncion utiliza una variable global llamada
"contexto", que es el contexto del canvas sobre el que estamos dibuiando.
Ahora para acabar vamos a ver la Iuncion que se encargara de inicializar el contexto del canvas y deIinir la
eiecucion periodica de la Iuncion cuadradosAleatorios() para generar la animacion.
//variable global contexto sin inicializar
var contexto;

window.onload ÷ Iunction()¦
//Recibimos el elemento canvas
contexto ÷ cargaContextoCanvas('micanvas');
iI(contexto)¦
//Si tengo el contexto, deIino la Iuncion periodica
setInterval("cuadradosAleatorios(contexto)", 200);
}
}
Todo esto iunto hace que consigamos una animacion en el canvas, pues se invoca a la Iuncion
cuadradosAleatorios() cada 200 milisegundos, lo que genera dibuios aleatorios distintos cada poco tiempo.
Ahora podemos ver el eiemplo en marcha en una pagina aparte.
Ejemplo para cambiar el color del trazado
Hemos hecho el eiemplo anterior con una ligera modiIicacion. En este segundo caso, en lugar de rellenar los
rectangulos de color, vamos a dibuiar solo el trazado. Por supuesto, en cada paso del bucle se cambiara el
color de trazado, en lugar del color de relleno. Ademas, los rectangulos cuyo trazado estamos dibuiando
seran un poco menor.
La unica Iuncion que tiene cambios con respecto al eiemplo anterior es cuadradosAleatorios():
Iunction cuadradosAleatorios()¦
Ior(i÷0; i300; i¹÷10)¦
Ior(i÷0; i250; i¹÷10)¦
contexto.strokeStyle ÷ colorAleatorio();
contexto.strokeRect(i,i,5,5)
}
}
}
El eiemplo cambiando esta Iuncion se puede ver en una pagina aparte.
















Ieamos cómo rea||zar d|bu[os en un canvas con |as func|ones para cam|nosţ que perm|ten
|a creac|ón de estructuras más comp|e[asŦ
l Canvas es uno de los elemenLos más novedosos del P1ML 3ţ que va comenzamos a expllcar en el arLlculo de
lnLroducclón a CanvasŦ n anLerlores arLlculos vlmos e[emplos sobre dlversos dlbu[os en un elemenLo canvasţ como
los recLánaulosŦ Ahora vamos a conLlnuar aprendlendo cómo dlbu[ar esLrucLuras dlversas por medlo de los camlnosŦ
En canvas existen diversas Iunciones que nos pueden servir para dibuiar siluetas a nuestro antoio, que se
tienen que utilizar de manera complementaria. El proceso pasa por situarse en un punto del lienzo, luego
deIinir cada uno de los puntos por los que pasa nuestro camino y luego pintar de color dentro, o simplemente
dibuiar la linea que pasaria por todos esos puntos. En este articulo veremos como rellenar de color todo el
area que queda deIinida por un camino.
Veamos para empezar un resumen de algunas de las Iunciones disponibles para hacer caminos, las que que
utilizaremos durante el presente articulo.
unción beginPath()
sLa funclón slrve para declrle al conLexLo del canvas que vamos a empezar a dlbu[ar un camlnoŦ no Llene nlnaun
parámeLro v por sl sola no hace nlnauna acclón vlslble en el canvasŦ Dna vez lnvocada la funclón podremos empezar
a dlbu[ar el camlno anadlendo seamenLos para compleLarlo con las dlferenLes funclones de camlnosŦ
-otať Las funclones bealnÞaLh() v slaulenLes en realldad son meLodos del ob[eLo de conLexLo del canvasŦ sLe ob[eLo
que manLlene el conLexLo del canvas lo Lenemos que exLraer nosoLros por medlo de !avascrlpLţ a parLlr del elemenLo
canvas donde deseemos dlbu[arŦ Cómo Lraba[ar v exLraer el conLexLo de un canvas fue va expllcado en el arLlculo
[emplo de dlbu[o con el AÞl de canvasŦ
Segun las pruebas realizadas, podriamos iniciar un camino sin utilizar antes beginPath(), puesto que el
eIecto a primera vista es el mismo que si no lo invocamos (entiendo que el navegador lo invoca por nosotros
al empezar a utilizar Iunciones de caminos en canvas). No obstante, debe ser recomendable hacer las cosas
correctamente e invocarlo antes de comenzar un camino.
unción moveTo()
Slrve para mover el punLero lmaalnarlo donde comenzaremos a hacer el camlnoŦ sLa funclón no dlbu[a nada en slţ
pero nos permlLe deflnlr el prlmer punLo de un camlnoŦ Llamar esLa funclón es como sl levanLásemos el láplz del
llenzo v lo Lrasladásemosţ sln plnLarţ a oLra poslclónŦ
Recibe como parametro los puntos x e y donde ha de moverse el puntero para dibuio. Para saber cual es el
punto donde deseamos movernos (x,y), Recordar que el eie de coordenadas del canvas es la esquina superior
izquierda.
unción lineTo()
sLa funclón provoca que se dlbu[e una llnea recLaţ desde la poslclón acLual del punLero de dlbu[oţ hasLa el punLo
(xţv) que se lndlque como parámeLroŦ l meLodo llne1o()ţ por LanLo es como sl posáramos el láplz sobre el llenzo en
la poslclón acLual v arrasLrásemosţ dlbu[ando una llnea recLaţ hasLa el punLo donde se deflnló al lnvocar el meLodoŦ
La posicion actual del camino la podemos haber indicado previamente con un moveTo(), o donde hayamos
terminado una linea dibuiada anteriormente. Si no se indico antes una posicion de nuestro puntero de dibuio,
lineTo() no dibuia ninguna linea, sino que se tendra en cuenta las coordenadas enviadas como parametro
para posicionar tan solo el puntero de dibuio alli. Dicho de otra manera, si no se diio donde empezar el
dibuio, o no se ha dibuiado ningun otro segmento en el camino anteriormente, lineTo() sera equivalente a
moveTo().
unción fill()
sLe meLodo del conLexLo del canvas slrve para rellenar de color el área clrcunscrlLa por un camlnoŦ Þara rellenar de
color un camlnoţ el camlno Lendrla que esLar cerradoţ por lo queţ sl no lo esLáţ auLomáLlcamenLe se cerrará con una
llnea recLa hasLa el prlmer punLo del camlnoţ es declrţ donde comenzamos a dlbu[arŦ Sln embaraoţ sl duranLe los
dlsLlnLos seamenLos del camlno nos de[amos alaun seamenLo ablerLoţ no se plnLará nadaŦ
Como decimos, si no llegamos a cerrar el camino, el metodo Iill() lo cerrara por nosotros, pero podriamos
utilizar explicitamente el metodo closePath() para hacerlo nosotros (closePath() lo explicaremos en Iuturos
articulos).
Ejemplo de camino sencillo
Con las funclones vlsLas hasLa el momenLo va podemos hacer unas prlmeras pruebas de camlnos en canvasŦ Ahora
vamos ver como podrlamos reallzar un rombo en el canvasţ relleno de colorŦ
ctx.beginPath();
ctx.moveTo(50,5);
ctx.lineTo(75,65);
ctx.lineTo(50,125);
ctx.lineTo(25,65);
ctx.Iill();
Como se puede ver, iniciamos un camino con beginPath(). Luego hacemos un moveTo() para indicar el
punto donde comenzar el camino. Posteriormente dibuiamos varias lineas a diversos puntos del canvas, para
acabar invocando al metodo Iill(), con lo que rellenaremos de color el camino.
Fiiarse que el camino no se habia llegado a cerrar. Por lo que Iill() lo cerrara por nosotros con una linea al
primer punto donde comenzamos el dibuio.
-otať Þara e[ecuLar esLas llneas de códlao neceslLaremos una lnsLancla del ob[eLo conLexLo del canvasţ para lnvocar
Lodos los meLodos sobre elŦ l ob[eLo del canvas lo Lenemos en la varlable ƍcLxƍ en el códlao del e[emploŦ n el
códlao compleLo del e[erclclo podremos ver la funclón que se podrla uLlllzar para obLener el conLexLoŦ
Código completo del ejemplo de camino
A conLlnuaclón podemos enconLrar el códlao compleLo de esLe e[emplo de consLrucclón de un camlno con el
elemenLo Canvas del P1ML 3Ŧ
html~
head~
title~Canvas Caminos/title~
script~
//La ya conocida Iuncion para cargar el contexto de un canvas
Iunction cargaContextoCanvas(idCanvas)¦
var elemento ÷ document.getElementById(idCanvas);
iI(elemento && elemento.getContext)¦
var contexto ÷ elemento.getContext('2d');
iI(contexto)¦
return contexto;
}
}
return FALSE;
}

window.onload ÷ Iunction()¦
//Recibimos el elemento canvas
var ctx ÷ cargaContextoCanvas('micanvas');
iI(ctx)¦
ctx.beginPath();
ctx.moveTo(50,5);
ctx.lineTo(75,65);
ctx.lineTo(50,125);
ctx.lineTo(25,65);
ctx.Iill();
}
}
/script~
/head~

body~
canvas id÷"micanvas" width÷"150" height÷"150"~
Accede a este script con un navegador que acepte canvas del HTML 5
/canvas~
/body~
/html~
Para acabar, podemos ver el eiemplo en marcha en una pagina aparte.













egundo e[emp|o sobre |os cam|nos en e| e|emento canvasţ donde veremos |as func|ones
c|oseÞath() y stroke()Ŧ
l elemenLo canvas es un llenzo donde podemos dlbu[ar dlrecLamenLe con funclones !avascrlpLţ que Llene va
apllcaclones lnflnlLas en el desarrollo de websŦ sLamos expllcando acerca de esLe elemenLo en el Manual de Canvas
del P1ML 3 v en el presenLe arLlculo vamos a seaulr hablando del dlbu[o camlnosţ vlendo dos nuevas funclones del
AÞl de CanvasŦ Convlene no obsLanLe senalar que el Lema sobre camlnos en canvas lo empezamos a expllcar en
Camlnos en Canvas del P1ML 3Ŧ
En el presente articulo veremos dos nuevas Iunciones utiles en la creacion de caminos, que son closePath(),
para cerrar un camino y stroke(), para dibuiar el camino realizado mediante una linea. Las dos Iunciones,
como cualquier otra Iuncion de dibuio en el lienzo de canvas, son metodos del obieto contexto del canvas,
que se debe obtener a partir del elemento canvas con las correspondientes Iunciones de Javascript, tal como
vimos anteriormente en este manual. Veremos estas nuevas Iunciones para dibuio de caminos con un
eiemplo, pero antes podemos explicarlas detalladamente.
unción closePath()
Slrve para cerrar un camlnoţ volvlendo a su punLo lnlclal de dlbu[oŦ 8ecordemos que el camlno Llene un punLo lnlclal
en el que nos slLuamos para comenzar el dlbu[oţ con move1o()Ŧ Lueao vamos dlbu[ando seamenLos en el camlno por
medlo de llneas que nos llevan a oLros punLos del llenzoŦ Þues closeÞaLh() serla como dlbu[ar una llnea recLa desde el
punLo donde se hava quedado el camlno al punLo lnlclal donde empezamos a consLrulrloŦ l meLodo closeÞaLh() no
reclbe nlnaun parámeLroŦ
unción stroke()
Con el meLodo sLroke() podemos dlbu[ar una llnea por Lodo el recorrldo del camlno que havamos creado por medlo
de sus dlsLlnLos seamenLosŦ s slmllar al meLodo flll()ţ expllcado en el arLlculo anLerlorţ con la dlferencla que flll()
rellenaba de color v sLroke() Lan solo dlbu[a la sllueLaŦ Ademásţ en el caso de flll() se neceslLaba Lener el camlno
cerradoţ por lo que se cerraba auLomáLlcamenLe sl no lo hablamos hecho v sLroke() realmenLe puede esLar
dlsconLlnuadaţ puesLo que sólo es una llnea lo que se dlbu[a v no un áreaŦ
Ejemplo de camino con closePath() y stroke()
A conLlnuaclón vamos a reallzar oLro e[emplo de dlbu[o con el AÞl de canvas v uLlllzando funclones para la reallzaclón
de camlnosŦ Þor compllcarlo un pocoţ vamos a reallzar el camlno con un bucleţ en el que en cada lLeraclón
dlbu[aremos un seamenLo del camlnoŦ l resulLado que vamos a obLener es una especle de perfll de una escaleraŦ
ctx.beginPath();
ctx.moveTo(1,1);
Ior (i÷1;i100;i¹÷5)¦
iI((i°2)!÷0)¦
ctx.lineTo(i¹5,i);
}else¦
ctx.lineTo(i,i¹5);
}
}
ctx.lineTo(1,i);
ctx.closePath();
ctx.stroke();
-otaťÞrlmero cabe adverLlr de nuevo que para e[ecuLar ese códlao neceslLamos una varlable que hemos llamado
ƍcLxƍ que conLlene el conLexLo del canvasţ que es sobre el que lnvocaremos los dlsLlnLos meLodos para dlbu[ar en el
canvasŦ
En el script comenzamos el camino con beginPath(), luego con moveTo(1,1) nos situamos en el punto donde
deseamos comenzar el dibuio. A continuacion realizamos un bucle Ior para dibuiar diversas lineas en
diversas coordenadas.
Acabamos haciendo una ultima linea con lineTo() y despues un closePath() para que se dibuie una linea
Iinal hasta el punto de inicio del camino, que cerrara la silueta realizada. Con stroke() hacemos que se dibuie
una linea pasando por todos los segmentos que completan el camino dibuiado.
Este eiemplo podemos verlo en una pagina aparte.
Ejemplo de línea discontinua
Sl habemos observado el e[emplo anLerlor en marcha habremos vlsLo que en realldad hav dos e[emplos de canvasŦ l
seaundo es laual que el prlmeroţ o casl laualţ con la unlca dlferencla que el camlno no esLá cerrado v esLá formado
por una llnea dlsconLlnuaŦ sLo se puede hacer perfecLamenLe con sLroke()ţ pues para plnLar llneas no es necesarlo
que clerren compleLamenLe el camlnoŦ
El dibuio anterior lo hemos realizado con un codigo como el que sigue:
ctx.beginPath();
ctx.moveTo(1,1);
Ior (i÷1;i100;i¹÷5)¦
iI((i°2)!÷0)¦
ctx.lineTo(i¹5,i);
}else¦
ctx.moveTo(i,i¹5);
}
}
ctx.stroke();
Ejemplo completo de dibujo de líneas con caminos en canvas
Þara Lodos los lnLeresadosţ colocamos a conLlnuaclón el códlao compleLo de esLe e[emploŦ
html~
head~
title~Canvas Caminos con stroke/title~
script~
//Recibe un identiIicador del elemento canvas y carga el canvas
//Devueve el contexto del canvas o FALSE si no ha podido conseguise
Iunction cargaContextoCanvas(idCanvas)¦
var elemento ÷ document.getElementById(idCanvas);
iI(elemento && elemento.getContext)¦
var contexto ÷ elemento.getContext('2d');
iI(contexto)¦
return contexto;
}
}
return Ialse;
}

window.onload ÷ Iunction()¦
//Recibimos el elemento canvas
var ctx ÷ cargaContextoCanvas('micanvas');
iI(ctx)¦
ctx.beginPath();
ctx.moveTo(1,1);
Ior (i÷1;i100;i¹÷5)¦
iI((i°2)!÷0)¦
ctx.lineTo(i¹5,i);
}else¦
ctx.lineTo(i,i¹5);
}
}
ctx.lineTo(1,i);
ctx.closePath();
ctx.stroke();
}


//otro eiemplo basado en el mismo codigo
var ctx ÷ cargaContextoCanvas('micanvas2');
iI(ctx)¦
ctx.beginPath();
ctx.moveTo(1,1);
Ior (i÷1;i100;i¹÷5)¦
iI((i°2)!÷0)¦
ctx.lineTo(i¹5,i);
}else¦
ctx.moveTo(i,i¹5);
}
}
ctx.stroke();
}
}

/script~
/head~
body~

canvas id÷"micanvas" width÷"150" height÷"150"~
Recicla tu browser, POR FAVOR!!
/canvas~
br~
br~
canvas id÷"micanvas2" width÷"150" height÷"150"~
POR FAVOR, Recicla tu navegador!!
/canvas~

/body~
/html~
Podemos acceder a una pagina con el eiemplo en Iuncionamiento.
Cómo d|bu[ar un cam|no en canvas de n1ML 5 con d|versas var|antesţ cerrado y s|n cerrarţ
y con o s|n re||eno de co|orŦ
;ulzás nos esLemos ponlendo un poco repeLlLlvos con los camlnos en Canvasţ pero es que el Lema es
suflclenLemenLe lmporLanLe como para publlcar varlos arLlculosŦ Como los proplos lecLores de uesarrolloWebŦcom
dlcenţ nunca esLá de más poner varlos e[emplos que avuden un poco más a aslmllar los conoclmlenLos brlndados en
los manualesŦ
En articulos anteriores ya explicamos como hacer caminos en canvas del HTML 5 esta ocasion vamos a
dedicarnos a dibuiar el mismo camino, que es un simple hexagono, pero con distintas variantes, para que las
personas puedan ver las diIerencias entre cerrar o no los caminos, asi como rellenarlos de color.
En el presente articulo veremos las siguientes variantes de un camino con la Iorma de hexagono regular:
Ŧ Camlno relleno de color v con el clerre de camlno no expllclLoŦ
2Ŧ Camlno relleno de oLro color v con el clerre de camlno expllclLo por medlo de closeÞaLh()Ŧ
3Ŧ Camlno sln relleno de colorţ sólo la llneaţ v sln clerre de camlno
4Ŧ Camlno sln relleno de colorţ sólo la llnea de la sllueLa v con clerre de camlno expllclLoŦ

8ealmenLe es un mlsmo e[erclclo con varlas varlanLes que esperamos pueda darnos alauna plsLa adlclonal sobre el
dlbu[o en el elemenLo canvas del P1ML 3Ŧ Þodemos ver una lmaaen con los cuaLro e[emplos de camlnos que
haremos a conLlnuaclónť

1.- Camino relleno sin cierre explícito
sLe prlmer e[emplo de dlbu[o en un canvas creará un camlno con forma de recLánaulo que Lendrá un relleno de
colorŦ n esLe caso el el camlno no esLá cerradoţ pero veremos que da un poco laual en esLe casoŦ
Para rellenar de color un camino utilizamos la el metodo Iill() del contexto del canvas, que antes de rellenar
de color hace un cierre automatico del camino. De esta manera, aunque no se haya completado el camino
hasta cerrarlo, al invocar ctx.Iill() esta Iuncion lo cerrara por nosotros.
//Hexagono relleno de color, cierre de camino automatico con Iill
var ctx ÷ cargaContextoCanvas('canvas1');
iI(ctx)¦
ctx.beginPath();
ctx.moveTo(50,15);
ctx.lineTo(112,15);
ctx.lineTo(143,69);
ctx.lineTo(112,123);
ctx.lineTo(50,123);
ctx.lineTo(19,69);
ctx.Iill();
}
2.- Camino relleno con cierre explícito
n esLa seaunda varlanLe del camlno del hexáaono Lenemos un camlno que sl hemos cerrado expllclLamenLe con el
meLodo closeÞaLh()Ŧ Sln embaraoţ como flll() va se encaraaba de cerrar el camlno por nosoLros auLomáLlcamenLeţ no
exlsLe dlferencla enLre ese camlno v el anLerlorŦ s declrţ para el caso de camlnos con color de rellenoţ es lndlferenLe
sl el camlno esLá o no cerradoţ pues se cerrará auLomáLlcamenLe para poder rellenarse de colorŦ
No obstante, para adornar un poco mas el eiemplo, hemos optado por cambiar el color de relleno del
hexagono, por medio de la propiedad IillStyle del obieto contexto del canvas.
//Hexagono rellenado, cierre de camino explicito con closePath
var ctx ÷ cargaContextoCanvas('canvas2');
iI(ctx)¦
ctx.IillStyle ÷ '#990000';
ctx.beginPath();
ctx.moveTo(50,15);
ctx.lineTo(112,15);
ctx.lineTo(143,69);
ctx.lineTo(112,123);
ctx.lineTo(50,123);
ctx.lineTo(19,69);
ctx.closePath();
ctx.Iill();
}
3.- Camino sin relleno y sin cierre
Ahora reLomemos los camlnos reallzados sólo con una llneaţ sln rellenar de colorţ que va vlmos en el arLlculo
anLerlorŦ vendrá blen para ver las dlferenclas enLre los camlnos que Llenen el color de rellenoŦ
Como veremos, el camino es exactamente igual que los anteriores, con la diIerencia que para dibuiar solo la
linea del contorno del camino se utiliza el metodo stroke() del obieto contexto de canvas, en lugar de usar
Iill() que hace los caminos con relleno de color.
Ademas, podremos observar como al usar el metodo stroke() no se cierra automaticamente el camino como
ocurria con Iill(), sino que se queda abierto.
//Hexagono solo linea, sin cierre de camino
var ctx ÷ cargaContextoCanvas('canvas3');
iI(ctx)¦
ctx.beginPath();
ctx.moveTo(50,15);
ctx.lineTo(112,15);
ctx.lineTo(143,69);
ctx.lineTo(112,123);
ctx.lineTo(50,123);
ctx.lineTo(19,69);
ctx.stroke();
}
4.- Camino sin relleno y con cierre
Þara acabar con esLos e[emplos de dlbu[o de hexáaonos en un canvas vamos a mosLrar cómo reallzar un camlno sólo
con la llnea del bordeţ como el anLerlorţ pero con el clerre de camlno que se conslaue con closeÞaLh()Ŧ
El camino es el mismo, pero antes de llamar a stroke() para dibuiar la linea, hacemos un closePath() para
cerrar el camino. Para añadir algun interes adicional al camino, hemos utilizado un color distinto para la
linea del contorno, que se consigue en esta ocasion con la propiedad strokeStyle del obieto contexto del
canvas.
//Hexagono solo linea, con cierre de camino closePath()
var ctx ÷ cargaContextoCanvas('canvas4');
iI(ctx)¦
ctx.strokeStyle ÷ '#990000';
ctx.beginPath();
ctx.moveTo(50,15);
ctx.lineTo(112,15);
ctx.lineTo(143,69);
ctx.lineTo(112,123);
ctx.lineTo(50,123);
ctx.lineTo(19,69);
ctx.closePath();
ctx.stroke();
}
Hasta aqui llega esta practica de caminos en Canvas del HTML 5, con distintas variantes a partir de los
mismos puntos del camino.
Si lo deseas, puedes ver una pagina donde se muestran los cuatro eiemplos de caminos vistos en este
articulo.














n este art|cu|o veremos otras pruebas de d|bu[o de cam|nos en |os canvasŦ
A lo larao del Manual del componenLe Canvas del P1ML 3 hemos vlsLo varlos e[emplos de dlbu[o de camlnosŦ Sl
hemos seauldo los caplLulos anLerlores de esLe manual va deberlamos haber coaldo un poco de prácLlca al dlbu[ar
llneas que slauen un camlnoţ relleno de color o sln rellenoŦ Lo clerLo es que va podrlamos pasar a alaun oLro Lema
más adelanLadoţ pero Lenemos Lodavla en el LlnLero un par de e[emplos con camlnos que pueden ser lnLeresanLes
para acabar de enLender cómo se creanŦ
En el presente eiemplo estamos haciendo varios caminos en un mismo canvas y ademas, vamos a rellenar de
colores distintos cada uno de los caminos, lo que nos vendra bien para seguir practicando. La idea de este
articulo es que nos podamos Iamiliarizar un poco mas con la practica de abrir caminos, cerrarlos y volver a
abrir otros caminos. Ademas, podemos ver que con un mismo camino tambien podemos pintar en dos partes
distintas del lienzo, trasladando el puntero de dibuio pero sin pintar.
Primer ejemplo. pintar dos caminos distintos
sLe prlmer e[emplo Lendrla el slaulenLe códlaoť
var ctx ÷ cargaContextoCanvas('micanvas');
iI(ctx)¦
//primer camino
ctx.beginPath();
ctx.moveTo(20,10);
ctx.lineTo(32,20);
ctx.lineTo(22,20);
ctx.lineTo(22,35);
ctx.lineTo(17,35);
ctx.lineTo(17,20);
ctx.lineTo(7,20);
//ctx.closePath(); opcional antes de un Iill()
ctx.Iill();

//creo un segundo camino
ctx.beginPath(); //probar a comentar esta linea para ver lo que pasa
ctx.IillStyle ÷ '#II8800';
ctx.moveTo(47,50);
ctx.lineTo(67,70);
ctx.lineTo(67,30);
ctx.closePath();
ctx.Iill();
}
-otať Lo clerLo es que esLe códlao esLá lncompleLoţ pues le falLa la funclón caraaConLexLoCanvas() que va se ha
expllcado anLerlormenLe en el arLlculo nLender el llenzo de canvasŦ
En ese codigo estamos realizando dos caminos distintos sobre un mismo canvas. El primer camino esta
separado en el codigo del segundo y los dos comienzan con un beginPath(). En cada camino hacemos un
moveTo() para colocar el puntero de dibuio en las coordenadas deseadas.
Luego se hace el closePath() para cerrar el camino, completandolo con una linea recta desde el ultimo punto
hasta el punto desde donde comenzamos el caminio. Pero como se puede ver en eiemplo, la llamada al
metodo closePath() es opcional, pues estos dos caminos se rellenan de color con Iill() y este metodo requiere
que el camino este cerrado. Por eso, si el camino no se cerro explicitamente con closePath(), con la llamada
a Iill() se hace implicitamente.
Otra cosa interesante es el cambio de color que hacemos en el segundo camino con la propiedad IillStyle del
obieto canvas, en la linea:
ctx.IillStyle ÷ '#II8800';
El primer eiemplo se puede ver en marcha en este enlace.
$egundo ejemplo. un camino que pinta en dos lugares distintos
l seaundo e[emplo que nos queda por ver es muv parecldo al prlmeroţ con la dlferencla que ahora vamos a dlbu[ar
la sllueLa o conLornoţ en vez de rellenarlos de colorŦ Ademásţ en esLe seaundo e[emplo sólo Lenemos un camlno en
vez de dos que habla anLesŦ sLo es porque hacemos sólo un bealnÞaLh() v aunque cerremos el camlno con
closeÞaLh() v lueao haaamos un move1o() para Lrasladar el punLero de dlbu[oţ en realldad sólo Lenemos un camlnoŦ
Es por ello que, el cambio de color con la propiedad strokeStyle, aunque se haga en el medio del codigo,
aIecta a todo el trazado, pues es el mismo camino.
var ctx ÷ cargaContextoCanvas('micanvas');
iI(ctx)¦
ctx.beginPath();
ctx.moveTo(20,7);
ctx.lineTo(32,20);
ctx.lineTo(22,20);
ctx.lineTo(22,35);
ctx.lineTo(17,35);
ctx.lineTo(17,20);
ctx.lineTo(7,20);
ctx.closePath();

//cambio el color de la linea, el color cambia para todo el trazo
ctx.strokeStyle ÷ '#II8800';

//sigo en el mismo camino, pero muevo el puntero de dibuio
ctx.moveTo(47,50);
ctx.lineTo(67,70);
ctx.lineTo(67,30);
ctx.closePath();
ctx.stroke();
}
El segundo eiemplo en marcha se puede ver tambien en una pagina aparte.
Hemos de admitir que estos dos eiemplos no signiIican un claro avance con respecto a lo que ya habiamos
relatado en el manual, pero nunca esta de mas hacer eiemplos practicos. Ademas, hay muchas cosas que
merece la pena practicar para entender bien como se realizan. En el siguiente articulo explicaremos nuevas
tecnicas para hacer lineas curvas y no solo lineas rectas como hasta ahora.




Los cam|nos en |os e|ementos canvas de| n1ML 5 pueden tener curvasţ que consegu|mos
por med|o de |os arcosţ |as curvas cuadrát|cas y |as curvas bez|erŦ
PasLa ahora en el manual de canvas del P1ML 3 hemos aprendldo a hacer camlnos con llneas recLasţ asl que vamos a
avanzar un poco más en la maLerla aprendlendo a dlbu[ar camlnos con curvasŦ
En principio las librerias de Iunciones para dibuio en el canvas permite tres metodos de para hacer trazos en
curva, basados en Iunciones matematicas para expresar curvas de distintos tipos:
Arcos:
Nos permiten dibuiar circunIerencias o segmentos de circunIerencias, lo que se conoce como arcos. Lo
conseguimos con el metodo arc() enviando una serie de parametros que veremos mas adelante.
Curvas cuadráticas:
Es una manera de especiIicar una curva en la que tenemos un punto de inicio, un punto de Iin y un tercer
punto que indica hacia que parte se curvara la linea. Esta curva veremos que es Iacil de entender y que nos
servira para hacer esquinas redondeadas, entre otras muchas cosas.
Curvas Bezier:
Es una manera matematica de expresar una curva por medio de cuatro puntos. El punto de inicio, el de Iin y
dos puntos que indicaran hacia donde se curvara la primera y segunda mitad de la linea. Es una curva un
poco mas compleia de entender, pero posiblemente ya hayamos experimentado con este tipo de curvas en
programas de diseño como Photoshop o Ilustrator, lo que podra ayudar un poco a comprenderla.
La verdad es que para hacer todas estas curvas hay que saber un poco de matematicas y habria que hacer
calculos para poder aiustarlas a nuestras necesidades. Digamos que todas las Iormulas estan pensadas para el
dibuio tecnico y no artistico, por eso quizas un matematico tendria mas soltura que un artista para dibuiar
cosas en el lienzo del canvas.
No obstante, no podemos deiar que pensar que el dibuio en canvas es un proceso inIormatizado y como
estamos diseñando a nivel de lenguaie de programacion, no queda otra cosa que adaptarse a las Iormulas
matematicas implementadas para hacer curvas. Mas adelante veremos otras maneras de solventar estos
temas, como la utilizacion de imagenes, que podemos importar y "pegar" en el canvas, a partir de archivos
graIicos creados con cualquier programa como Photoshop.
En los siguientes articulos veremos con detalle cada uno de estos tres tipos de curvas con sus eiemplos.
Podemos comenzar conociendo las curvas en arcos.









Cómo d|bu[ar arcosţ para hacer curvas basadas en c|rcunferenc|as o segmentos de e||asţ
en e| ||enzo de |os e|ementos Canvas de| n1ML 5Ŧ
n esLe arLlculo expllcaremos cómo hacer camlnos con arcosŦ Los arcos son seamenLos de clrcunferenclasţ o una
clrcunferencla enLeraţ en el caso de un arco compleLoŦ Son uno de los modos de hacer curvas en el elemenLo Canvas
del P1ML 3Ŧ
El metodo que podemos dibuiar para hacer un arco es arc(), que invocamos sobre el obieto el contexto del
canvas. Este metodo requiere unos cuantos parametros para poder invocarlo y especiIicar las caracteristicas
del arco que se desea hacer y lo cierto es que no resulta del todo trivial porque hay que conocer algunas
Iormulas matematicas para el trabaio con circunIerencias. Asi que tendremos que reIrescar algunos
conocimientos que pueden haberse olvidado del periodo de enseñanza media.
-otať laual que los camlnosţ una vez creadosţ podemos decldlr sl queremos rellenarlos de colorţ medlanLe el meLodo
flll() o blen dlbu[ar solamenLe el conLornoţ con el meLodo sLroke()Ŧ 1odas esLas cosas sobre camlnos v demás se
pueden aprender en el Manual del Lraba[o con CanvasŦ
Estos son los parametros que debemos enviar al metodo arc():
arc(x, y, radio, anguloinicio, anguloIinal, sentidocontrariodelreloi)
O Los parámeLros xţ v corresponden con las coordenadas del cenLro del arcoŦ
O l parámeLro radlo es el numero de plxeles que Llene el arco como radloŦ
O Þor su parLe anaulo_lnlclo v anaulo_flnal son los ánaulos donde comlenza v acaba el radloŦ sLán Lomados
como sl el e[e de la horlzonLal Luvlese el ánaulo ceroŦ
O SenLldo_conLrarlo_del_relo[ es un parámeLro boleanoţ donde Lrue slanlflca que el Lrazo va desde un ánaulo
de lnlclo al de fln en el senLldo conLrarlo de las aau[as del relo[Ŧ lalse lndlca que ese camlno es en dlrecclón
conLrarlaŦ

La verdad es que Lodos los parámeLros son basLanLe senclllos de enLenderţ pero el ánaulo de lnlclo v fln no se lndlcan
en aradosţ como podrlamos suponerţ slno en radlanesŦ Þara el que no se acuerdeţ se puede hacer un paso de arados
a radlanes aLendlendo a la slaulenLe fórmulať
Radianes ÷ numeroPI x (grados/180)
Para convertir grados en radianes podriamos utilizar la siguiente linea de codigo Javascript:
var radians ÷ (Math.PI/180)*degrees
-otať MaLhŦÞl es el famoso numero Þl (3Ŧ4)Ŧ n !avascrlpLţ a parLlr de la clase MaLhţ Lenemos acceso a esa
consLanLeţ asl como dlversas funclnes maLemáLlcasŦ ver las noLas sobre la clase MaLhŦ
Entender los radianes
Þara comprender los aradlanes de una manera más vlsualţ asl como la referencla sobre el e[e xţ que serlan los cero
aradosţ se puede ver la slaulenLe lmaaenť

En la imagen anterior tenemos varios valores de radianes:
O 8adlanes serlan cero arados v es el punLo marcado por Þlţ en el e[e de las x v a la derecha del cenLro de la
clrcunferenclaŦ
O Ŧ3 Þl 8adlanes serlan 9 arados el punLo del e[e de las ? aba[o del cenLroŦ
O Þl 8adlanes es medla clrcunferenclaţ 8 aradosŦ
O Ŧ3 Þl 8adlanes serla el equlvalenLe a 27 arados
O 2 Þl 8adlanes son los 3 arados de la clrcunferencla compleLa v corresponderla con el mlsmo punLo que los
cero aradosŦ
Asl puesţ para hacer un clrculo compleLo con cenLro en (3ţ 3) de 2 plxeles de radloţ podrlamos uLlllzar un códlao
como esLeť
contextoCanvas.arc(50, 50 ,20 , 0, Math.PI*2, Ialse);
Como se puede ver, la circunIerencia empieza en 0 PI (cero) y termina en 2 PI.
Ejemplo de dibujo de caminos con arcos
Þara que se pueda enLender el meLodo con el que se crean camlnos comple[os a base de arcos en el elemenLo
Canvasţ vamos a presenLar el slaulenLe e[emploţ en el que crearemos esLe senclllo dlsenoŦ

En realidad aunque parezca una Iigura un poco compleia de hacer, se consigue con dos caminos. El primer
camino se rellena con color negro y el segundo con color narania. En la siguiente imagen se puede ver de
una manera mas clara los caminos que habria en para hacer ese diseño.

El primer camino tiene dos arcos concentricos, uno con radio mayor y el segundo con un radio menor. Este
primer camino comienza en el radio mayor y se puede ver una linea gris que hemos puesto, con unas
Ilechas, para poder reconocer la direccion que lleva el camino.
'eamos el código para hacer este diseño.
var cLx ƹ caraaConLexLoCanvas(ƌmlcanvasƌ)Ť
lf(cLx)ž
//prlmer camlnoţ en nearo
cLxŦbealnÞaLh()Ť
cLxŦarc(73ţ73ţţMaLhŦÞlţMaLhŦÞl*Ŧ3ţfalse)Ť
cLxŦarc(73ţ73ţ32ţMaLhŦÞl*Ŧ3ţMaLhŦÞl*ţfalse)Ť
cLxŦcloseÞaLh()
cLxŦflll()Ť

//seaundo camlnoţ en naran[a
cLxŦflllSLvle ƹ ƌ#ff88ƌŤ
cLxŦbealnÞaLh()Ť
cLxŦarc(73ţ73ţ3ţţMaLhŦÞl*2ţfalse)Ť
cLxŦflll()Ť
ſ
Recordar que este codigo es parcial, puesto que las partes que Ialtarian para completarlo, como la Iuncion
cargaContextoCanvas() o el HTML del elemento canvas, ya las conocemos de diversos articulos anteriores
del Manual de Canvas.
De todos modos podeis ver el codigo Iuente del eiercicio, que se puede ver en marcha de una pagina aparte.








Las curvas cuadrát|cas son un t|po espec|a| de curva que se def|ne por tres puntosţ dos
para e| |n|c|o y f|n de |a curva y otro para su tendenc|aŦ
n un arLlculo anLerlor del manual de Canvas del P1ML 3 va expllcamos los Llpos de curvas que podemos deflnlr al
dlbu[ar en el llenzoŦ 8ecordemos que para expresar cualquler dlbu[o en un canvas neceslLamos reallzar senLenclas en
lenaua[es de proaramaclónţ que sólo nos permlLen dlbu[ar por medlo de la deflnlclón de parámeLros maLemáLlcosţ
por lo que a veces el dlbu[o puede ser una Larea más compllcada que coaer un laplz v plnLar sobre papelŦ
En este caso vamos a revisar un tipo de curva llamada Cuadratica, que nos sirve bien para hacer curvas
sencillas, no necesariamente arcos de una circunIerencia, con un unico punto de inIlexion. Por intentar
explicarlo con palabras de manera entendible, podriamos decir que las curvas cuadraticas permiten expresar
una unica curvatura entre dos puntos. Para expresarlas tenemos un punto inicial, un punto Iinal de la curva y
un punto que deIine la tendencia de la curvatura.
Las curvas cuadraticas son un tipo concreto de curvas Bezier, es decir, una manera de expresar
matematicamente una curva, similar a las Bezier pero mas simpliIicada. Mientras que en las curvas Bezier
tenemos dos puntos para deIinir la tendencia de la curva, al principio y el Iin de la misma, en las curvas
cuadraticas solo tendremos un punto.
-otať no hemos vlsLo Lodavla las menclonadas curvas 8ezlerţ pues son más comple[as que las curvas cuadráLlcasŦ s
por eso que las veremos más adelanLeŦ
Método quadraticCurveTo() para dibujar curvas cuadráticas
Las curvas cuadráLlcas acLuan como oLros meLodos para dlbu[ar camlnos en el canvasŦ 8ecordemos que al hacer un
camlno en el canvas parLlmos de un punLo lnlclalţ que es el punLo donde esLá slLuado el punLero de dlbu[o
(podrlamos lmaalnar ese punLo lnlclal como el luaar donde esLá slLuado el láplz anLes de empezar a dlbu[ar la curva)Ŧ
Asl queţ para expresar una curva cuadráLlcaţ Lendremos que deflnlr el punLo flnal de la mlsma v el punLo lmaalnarlo
hacla el que se curvará la llnea enLre esos dos punLosŦ
Utilizariamos la siguiente llamada a un metodo del contexto del canvas.
quadraticCurveTo(pcx, pcy, x, y)
Este metodo recibe cuatro valores, que corresponden con dos puntos del lienzo. Insisto en que el punto
inicial ya esta implicito en el contexto del canvas, con la posicion dada del puntero de dibuio antes de
comenzar la curva cuadratica. Luego, el punto (pcx, pcy) es el lugar "imaginario" al que tendreria la
curvatura de la linea. El punto (x,y) seria el Iinal de la curva.
Una manera sencilla de entender este metodo seria ver la siguiente imagen:

En el anterior graIico tenemos tres puntos:
Ŧ l prlmeroţ marcado con color moradoţ es la poslclón del punLero de dlbu[o al lnlclar la curva cuadráLlcaŦ se
punLo no lo deflnlmos al hacer la llamada al meLodo quadraLlcCurve1o() porque va esLá lmpllclLo en el
conLexLo del canvasŦ n cualquler caso se puede camblar con una llamada a move1o() como hemos vlsLo en
arLlculos anLerloresŦ
2Ŧ l seaundo punLoţ marcado con color ro[oţ es la Lendencla de la curva cuadráLlcaŦ se punLo declmos que es
lmaalnarlo porque no aparece en la curvaŦ SlmplemenLe slrve para deflnlr cómo será la curvaLuraŦ Se deflne
con los parámeLros pcxţ pcvŦ
3Ŧ l Lercer punLoţ dlbu[ado en verdeţ es el flnal de la curvaţ deflnldo por los parámeLros xţ vŦ
Ejemplo de curva cuadrática
Ahora podemos ver un e[emplo de dlbu[o en canvas de un camlno que lncluve dos curvas cuadráLlcasŦ
var ctx ÷ cargaContextoCanvas('micanvas');
iI(ctx)¦
ctx.beginPath();
ctx.moveTo(10,60)
ctx.quadraticCurveTo(10,10,60,10);
ctx.lineTo(120,10);
ctx.lineTo(120,50);
ctx.quadraticCurveTo(120,110,60,110);
ctx.lineTo(10,110);
ctx.Iill();
}
Como se puede ver, aparte de la curva cuadratica tenemos otras lineas rectas en este dibuio, que luego se
rellena de color con Iill(). Nos da el resultado una Iorma parecida a una hoia, que se puede ver en el eiemplo
en marcha.
En el siguiente articulo podremos ver otro eiemplo para hacer curvas cuadraticas mas avanzado.













Iemos |as curvas cuadrát|cas a travós de un e[emp|o |nteract|vo de traba[o con cam|nos
en canvas de| n1ML 5 que d|bu[a rectángu|os con esqu|nas redondeadasŦ
vamos a mosLrar un nuevo e[emplo de dlbu[o de camlnos en canvas un poco más avanzadoŦ Crearemos una páalna
con un canvas que Lendrá un recLánaulo con esqulnas redondeadas v una lnLerfaz de usuarlo para que se pueda
conflaurar el radlo del redondeado de las esqulnasŦ
Es un eiemplo un poco avanzado porque mezclamos varias tecnologias, pues no solo tenemos que pintar en
el canvas, sino tambien responder a acciones del usuario para alterar el dibuio.
Por un lado tenemos que saber hacer dibuios en canvas con curvas cuadraticas. De hecho, este eiemplo de
trabaio en canvas del HTML 5 nos ayudara a observar un poco mas la utilidad de las curvas cuadraticas.
Para que el usuario pueda deIinir el radio de las curvas en las esquinas del rectangulo vamos a colocar una
interIaz de tipo "slider" creada con el Iramework Javascript Mootools, que permite cambiar el valor del radio
arrastrando un control. Ademas habra un campo de texto para cambiar este radio escribiendo cualquier otro
valor directamente.
Para saber meior que es lo que vamos a crear, recomendamos echar un vistazo a la pagina del eiemplo.
unción para crear un rectángulo con esquinas redondeadas en
canvas
n las páalnas de avuda para Lraba[ar con camlnos del canvas de Mozllla hav un códlao de una funclón para hacer
recLánaulos con esqulnas redondeadas que vamos a uLlllzar para esLe e[emploŦ
Iunction roundedRect(ctx,x,y,width,height,radius)¦
ctx.beginPath();
ctx.moveTo(x,y¹radius);
ctx.lineTo(x,y¹height-radius);
ctx.quadraticCurveTo(x,y¹height,x¹radius,y¹height);
ctx.lineTo(x¹width-radius,y¹height);
ctx.quadraticCurveTo(x¹width,y¹height,x¹width,y¹height-radius);
ctx.lineTo(x¹width,y¹radius);
ctx.quadraticCurveTo(x¹width,y,x¹width-radius,y);
ctx.lineTo(x¹radius,y);
ctx.quadraticCurveTo(x,y,x,y¹radius);
ctx.stroke();
}
Simplemente hace un rectangulo en la posicion x,y con anchura y altura dadas por medio de los parametros
width y height y un ultimo parametro radius para especiIicar el radio de la curvatura en la esquina
redondeadas.
Ahora podriamos hacer un rectangulo redondeado con la siguiente llamada:
var ctx ÷ cargaContextoCanvas('micanvas');
iI(ctx)¦
roundedRect(ctx, 10, 10, 130, 110, 20);
}
1avascript para cambiar el radio de las esquinas redondeadas
Ahora veamos el códlao !avascrlpL para alLerar el radlo de las esqulnas como respuesLa a evenLos del usuarloŦ
Þrlmero observemos esLa funclón !avascrlpLţ que reclbe un valor radlo v slrve para acLuallzar el recLánaulo del
canvasť
Iunction actualizaRadioRectangulo(radio)¦
radio ÷ parseInt(radio)
iI (isNaN(radio)) ¦
radio ÷ 0;
}
var ctx ÷ cargaContextoCanvas('micanvas');
iI(ctx)¦
ctx.clearRect(0,0,150,150);
roundedRect(ctx, 10, 10, 130, 110, radio);
}
}
Ahora podemos ver el campo de texto para cambiar el radio de las esquinas manualmente, escribiendo
cualquier otro valor dentro del mismo.
Radio: input type÷"text" name÷"radio" value÷"10" onkeyup÷"actualizaRadioRectangulo(this.value)"~
Como se puede ver, tiene deIinido un evento para actualizar el radio del rectangulo cuando el usuario pulsa
una tecla en el campo de texto.
Código Mootools para el componente slider
PasLa el momenLo no se habla uLlllzado para nada MooLoolsţ es declrţ Lodo lo que hemos vlsLo es !avascrlpL normalŦ
Þara lo que neceslLamos el framework !avascrlpL es para el componenLe sllderţ que es una lnLerfaz de usuarlo para
camblar valores al mover una barra que se desplaza a lzqulerda o derechaŦ
Ese componente slider esta en la distribucion Mootools que se llama "more" y tenemos que descargarla por
separado en la propia pagina de descarga de Mootools, accediendo mediante el enlace que pone "More
Builder". Alli tenemos que seleccionar por lo menos el componente "Slider" y los paquetes requeridos se
seleccionaran automaticamente.
-otať 8ecordemos que el ƍMoreƍ de MooLools son una serle de scrlpLs para crear lnLerfaces de usuarlo avanzadasŦ
Se descaraa por separado del ƍCoreƍţ que es el framework fundamenLalŦ Þor supuesLoţ para poder lmplemenLar los
componenLes del ƍMoreƍ se neceslLa Lener dlsponlble el ƍCoreƍŦ n prlnclplo dlcen en la páalna de MooLools que
para e[ecuLar cualquler componenLe del ƍMoreƍ es necesarlo haber descaraado el ƍCoreƍ compleLoŦ
Asi pues, para la parte del slider tenemos que incluir los scrips "Core" y "More"
script src÷"mootools-1.2.4-core-yc.is" type÷"text/iavascript"~/script~
script src÷"mootools-1.2.4.2-more.is" type÷"text/iavascript"~/script~
Luego podriamos tener un HTML como este para producir el contenedor del slider:
div id÷"slidercontenedor" style÷"width:220px; padding: 5px 0px; background-color:#eeeeee;"~
div id÷"slidercontrol" style÷"width:10px; height: 10px; background-color:#9999dd;"~/div~
/div~
div~Valor: span id÷"valor"~20/span~/div~
Ahora podemos ver el script Mootols para generar dinamicamente el componente a partir de estos elementos
HTML.
window.addEvent("domready", Iunction()¦
var miSlider ÷ new Slider("slidercontenedor", "slidercontrol",¦
'range': |0,55|,
'steps': 55,
'initialStep': 20,
onChange: Iunction(lugar)¦
actualizaRadioRectangulo(lugar);
$("valor").set("html", lugar);
}
});
});
Código completo del ejercicio
Þara acabar esLe e[erclclo nos quedan alaunas cosas que no hemos comenLado sobre el elemenLo canvas del P1ML
3ţ porque se hablan vlsLo anLerlormenLe en repeLldos arLlculos del Manual de Canvasţ como la funclón
caraaConLexLoCanvas()
De todos modos, para reIerencia podemos ver a continuacion el codigo completo de este creador dinamico e
interactivo de rectangulos redondeados.
!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"~

html~
head~
script src÷"mootools-1.2.4-core-yc.is" type÷"text/iavascript"~/script~
script src÷"mootools-1.2.4.2-more.is" type÷"text/iavascript"~/script~
title~Curvas cuadraticas/title~
script~
//Recibe un identiIicador del elemento canvas y carga el canvas
//Devueve el contexto del canvas o FALSE si no ha podido conseguise
Iunction cargaContextoCanvas(idCanvas)¦
var elemento ÷ document.getElementById(idCanvas);
iI(elemento && elemento.getContext)¦
var contexto ÷ elemento.getContext('2d');
iI(contexto)¦
return contexto;
}
}
return FALSE;
}

//Crea un rectangulo con las esquinas rendondeadas
Iunction roundedRect(ctx,x,y,width,height,radius)¦
ctx.beginPath();
ctx.moveTo(x,y¹radius);
ctx.lineTo(x,y¹height-radius);
ctx.quadraticCurveTo(x,y¹height,x¹radius,y¹height);
ctx.lineTo(x¹width-radius,y¹height);
ctx.quadraticCurveTo(x¹width,y¹height,x¹width,y¹height-radius);
ctx.lineTo(x¹width,y¹radius);
ctx.quadraticCurveTo(x¹width,y,x¹width-radius,y);
ctx.lineTo(x¹radius,y);
ctx.quadraticCurveTo(x,y,x,y¹radius);
ctx.stroke();
}

Iunction actualizaRadioRectangulo(radio)¦
radio ÷ parseInt(radio)
iI (isNaN(radio)) ¦
radio ÷ 0;
}
var ctx ÷ cargaContextoCanvas('micanvas');
iI(ctx)¦
ctx.clearRect(0,0,150,150);
roundedRect(ctx, 10, 10, 130, 110, radio);
}
}

window.onload ÷ Iunction()¦
//Recibimos el elemento canvas
var ctx ÷ cargaContextoCanvas('micanvas');

iI(ctx)¦
roundedRect(ctx, 10, 10, 130, 110, 20);
}
}
/script~
script~
window.addEvent("domready", Iunction()¦
var miSlider ÷ new Slider("slidercontenedor", "slidercontrol",¦
'range': |0,55|,
'steps': 55,
'initialStep': 20,
onChange: Iunction(lugar)¦
actualizaRadioRectangulo(lugar);
$("valor").set("html", lugar);
}
});
});
/script~
/head~

body~

canvas id÷"micanvas" width÷"150" height÷"150"~
Recicla tu navegador!!
/canvas~
Iorm name÷"Iradio"~
Radio: input type÷"text" name÷"radio" value÷"10" onkeyup÷"actualizaRadioRectangulo(this.value)"~
/Iorm~
br~br~
Arrastra el cuadradito azul para cambiar el radio del borde redondeado:
div id÷"slidercontenedor" style÷"width:220px; padding: 5px 0px; background-color:#eeeeee;"~
div id÷"slidercontrol" style÷"width:10px; height: 10px; background-color:#9999dd;"~/div~
/div~
div~Valor: span id÷"valor"~20/span~/div~
/p~
/body~
/html~
Finalizamos con el enlace a la pagina donde esta el eiemplo en marcha.

























Las curvas 8ez|er son |a manera más comp|e[a de espec|f|car d|bu[ar cam|nos curvos en e|
e|emento canvas de| n1ML 5Ŧ
8ezler es el ulLlmo de los Llpos de curva sobre camlnos en elemenLos canvas que nos queda por ver en el Manual de
Lraba[o con el canvas del P1ML 3Ŧ
El modelo que propone Bezier es un tipo de Iuncion matematica para deIinir curvas compleias en Iuncion de
varios valores. Es una tecnica utilizada en el dibuio tecnico, que surgio inicialmente en el mundo de la
aeronautica y el diseño de coches y que se hizo bastante popular a raiz de su utilizacion en varios programas
de diseño, como el conocido Photoshop. Las curvas Bezier se crean por medio de una Iormula matematica
que permite especiIicar y evaluar trazados curvos que podrian tener mas de un punto de inIlexion.
Método para dibujar curvas Bezier
n el dlbu[o con el elemenLo Canvas se han lmplemenLado las curvas 8ezler a parLlr del slaulenLe meLodo del
conLexLo del canvasŦ
bezierCurveTo(pc1x, pc1y, pc2x, pc2y, x, y)
Como vemos, se tienen que especiIicar coordenadas de tres puntos, de una manera similar a la que
conocimos en las curvas cuadraticas.
-otaťLas curvas cuadráLlcas un Llpo deLermlnado de curvas 8ezlerţ lo que ocurre es que en las curvas 8ezler
uLlllzamos dos punLos de Lendencla de la curvaţ para el prlnclplo v el flnal de la mlsmaţ mlenLras que en las curvas
cuadráLlcas sólo se uLlllzaba unoŦ Þara aclarar esLe punLo recomendamos echar un vlsLazo a las expllcaclones sobre
curvas cuadráLlcasŦ
En la siguiente imagen se puede ver un diagrama sobre los puntos que se utilizan para deIinir una curva
Bezier.

Como podemos ver, el metodo bezierCurveTo() tiene 6 parametros que corresponden con las coordenadas
de 3 puntos, pero en la imagen se utilizan hasta 4 puntos para deIinir la curva Bezier, pues el punto de
incicio de la curva ya estaba en el contexto del canvas. Asi que, atendiendo a la anterior imagen, estos serian
los puntos necesarios para componer la curva Bezier:
Ŧ l prlmer punLoţ marcado con color moradoţ es el punLo lnlclal de la curvaŦ sLe punLo no se Llene que
deflnlrţ pues va esLá lmpllclLo en el conLexLo del canvasţ en el luaar donde esLaba el punLero de dlbu[o al
llamar al meLodo bezlerCurve1o()Ŧ
-otať Al dlbu[ar cualquler seamenLo de un camlno Lenemos deflnldo slempre de anLemano el punLo lnlclal
de ese seamenLo del camlnoţ pues es el luaar donde esLá el punLero de dlbu[oŦ nosoLros podrlamos camblar
ese punLero de dlbu[oţ para camblar el prlmer punLo de la curvaţ con una llamada al meLodo move1o()Ŧ
2Ŧ l seaundo punLoţ que se ha marcado de color verdeţ es la Lendencla de la prlmera parLe de la curvaţ que se
lndlca con los parámeLros pcxţ pcvŦ
3Ŧ l Lerceroţ marcado de color ro[oţ es la Lendencla de la seaunda parLe de la curvaţ que se lndlca con los
parámeLros pc2xţ pc2vŦ
4Ŧ llnalmenLeţ Lenemos el punLo flnal de la curvaţ marcado en color arlsţ que se lndlca con los parámeLros xţvŦ
Ejemplo de dibujo con curvas Bezier
Ahora podemos crear un e[emplo para que los lecLores puedan Lermlnar de enLender las curvas 8ezlerŦ veamos un
camlno que conLlene alauna recLa v varlas curvas 8ezlerŦ
var ctx ÷ cargaContextoCanvas('micanvas');
iI(ctx)¦
ctx.beginPath();
ctx.IillStyle ÷ "#ccccII";
ctx.moveTo(0,40);
ctx.bezierCurveTo(75,17,70,25,100,60);
ctx.bezierCurveTo(130,35,140,45,145,50);
ctx.bezierCurveTo(180,45,190,55,200,70);
ctx.lineTo(200,150);
ctx.lineTo(0,150);
ctx.Iill();
}
La curva anterior se puede ver representada en una pagina aparte.
Ahora podemos complicar un poco mas ese eiemplo para crear otros caminos con curvas Bezier, con la
particularidad de que vamos a rellenarlos con colores semitransparentes.
-otať nosoLros aslanamos colores de relleno para los camlnos con la propledad flllSLvle del ob[eLo conLexLo del
canvasŦ Þodemos aslanar un color con un códlao 8C8 de una manera que va conocemosť
cLxŦflllSLvle ƹ ƍ#ccccffƍŤ
Þero aparLeţ Lamblen podemos lndlcar colores con valores 8C8 en declmalţ de manera slmllar a como se hace en
CSSţ e lncluso podemos aslanar valores 8C8A (con canal alpha para la Lransparencla)Ŧ
cLxŦflllSLvle ƹ ƌraba(ţ23ţţŦ3)ƌŤ
ctx.beginPath();
ctx.IillStyle ÷ 'rgba(100,230,100,0.3)';
ctx.moveTo(0,90);
ctx.bezierCurveTo(90,7,110,15,140,30);
ctx.bezierCurveTo(130,55,140,65,145,70);
ctx.bezierCurveTo(180,45,190,55,200,95);
ctx.lineTo(200,150);
ctx.lineTo(0,150);
ctx.Iill();

ctx.beginPath();
ctx.IillStyle ÷ 'rgba(230,230,100,0.3)';
ctx.moveTo(50,150);
ctx.bezierCurveTo(90,7,110,15,160,10);
ctx.bezierCurveTo(130,105,140,135,200,35);
ctx.lineTo(200,150);
ctx.lineTo(0,150);
ctx.Iill();
Creando esos otros caminos el eiemplo queda como se puede ver en este enlace
http://www.desarrolloweb.com/articulos/eiemplos/html5/bezier-curve.html.


























|bu[ar e| conten|do de |mágenes en |os e|ementos canvas de| n1ML 5ţ usando cua|qu|er
t|po de arch|vo gráf|co perm|t|do (g|fţ [pgţ png) para |nc|u|r una |magen en e| ||enzo de un
canvasŦ
Dna de las cosas más lnLeresanLes que podremos hacer cuando dlbu[amos en el llenzo del elemenLo canvas es
lmporLar v mosLrar dlrecLamenLe el conLenldo de archlvos aráflcos exLernosţ es declrţ usar lmáaenes Cllţ !ÞC o ÞnC
denLro de los dlbu[os que reallzamos con canvasŦ n esLe arLlculo veremos cómo reallzar esLe punLoţ aunque
adelanLamos que es basLanLe fácllŦ
Las imagenes provenientes de archivos graIicos las podemos crear con nuestro editor preIerido y hacer
Iacilmente graIicos bastante creativos y vistosos, o editar a partir de Iotos creadas con nuestra camara.
Luego las podemos incluir en el Canvas y asi conseguir que nuestros trabaios tengan una meior calidad que
si dibuiamos a mano con las Iunciones Javascript del API de Canvas.
Con un poco de creatividad y algo de codigo Javascript, podremos hacer composiciones basadas en varias
imagenes "pegadas" en el lienzo, o utilizar imagenes de Iondo sobre las que luego pintamos con Javascript
para destacar cosas. Como podemos usar cualquier tipo de archivo graIico, mientras que este soportado por
el navegador, las posibilidades son enormes.
keferenc|ať Þara enLender esLe arLlculo debes haber seauldo las expllcaclones del Manual del elemenLo Canvas
publlcadas en uesarrolloWebŦcomŦ
Método drawImage() para pintar una imagen en el canvas
Þara dlbu[ar una lmaaen en el llenzo se uLlllza el MeLodo drawlmaae()ţ que perLenece al ob[eLo conLexLo del canvasţ
con la slaulenLe slnLaxlsť
drawImage(obietoimagen, x, y)
Enviamos tres parametros, el primero es el obieto Javascript de la imagen que se desea incluir en el lienzo.
Los dos siguientes son las coordenadas donde situar la imagen, siendo (x,y) el punto donde se colocara la
esquina superior izquierda de la imagen.
Como decia, este metodo pertenece al obieto del canvas, por lo que antes de poder invocarlo debemos haber
obtenido el contexto del canvas, tal como hemos aprendido anteriormente en el Manual de Canvas para
cualquier otro tipo de dibuio.
Objeto 1avascript imagen
l ob[eLo lmaaen es uno de los ob[eLos báslcos de !avascrlpLţ que aforLunadamenLe funclona laual en Lodos los
naveaadoresŦ n realldad va lo hemos expllcado en anLerlores arLlculos denLro de uesarrolloWebŦcomŦ
ConcreLamenLe os recomendamos el Manual de 1raLamlenLo de lmáaenes en !avascrlpLŦ
Este obieto de imagen lo podemos obtener de varias maneras, pero de momento vamos a aprender a
generarlo dinamicamente con una instruccion Javascript.
var img ÷ new Image();
Con esto tenemos una variable llamada "img" que tiene un obieto imagen dentro. Ese obieto imagen en estos
momentos esta sin ningun atributo. Podriamos decir que esta sin inicializar. La tarea de inicializacion
Iundamental seria asignarle una ruta a un archivo graIico.
img.src ÷ 'logo-grande.ipg';
Esto hace que en el obieto Image se cargue la imagen que esta en el archivo 'logo-grande.ipg' y como no
hemos especiIicado ningun directorio en la ruta, se supone que ese archivo esta en la misma carpeta que el
archivo HTML donde este ese codigo Javascript.
Una vez tenemos el obieto imagen, podriamos pintarlo en un canvas por medio de la Iuncion drawImage().
Seria algo parecido a esto:
ctx.drawImage(img, 10, 10);
Pero atencion, porque este codigo tiene un detalle: la imagen no se dibuiara en el canvas a no ser que este
previamente cargada en el navegador.
En la secuencia de instrucciones, tal como lo tenemos ahora:
var img ÷ new Image();
img.src ÷ 'logo-grande.ipg';
ctx.drawImage(img, 10, 10);
El navegador al especiIicar el archivo de la imagen, actualizando el atributo src, tiene que descargarlo y eso
lleva un tiempo. Por tanto, si inmediatamente a indicar el archivo, intentamos dibuiar la imagen, dara un
problema. Dicho de otra manera, solo podemos dibuiar la imagen cuando estamos seguros que el navegador
ya la ha descargado. Para asegurarnos de este punto, podemos usar el evento onload de la imagen, para
llamar a drawImage() solo cuando la imagen ha terminado de cargarse.
var img ÷ new Image();
img.src ÷ 'canvas-html5.png';
img.onload ÷ Iunction()¦
ctx.drawImage(img, 10, 10);
}
Ejemplo de dibujo de imagen en un canvas
veremos a conLlnuaclón el códlao compleLo de un e[emplo que caraa una lmaaen en un elemenLo canvasŦ
html~
head~
title~Imagenes en Canvas/title~
script language÷"iavascript"~
Iunction cargaContextoCanvas(idCanvas)¦
var elemento ÷ document.getElementById(idCanvas);
iI(elemento && elemento.getContext)¦
var contexto ÷ elemento.getContext('2d');
iI(contexto)¦
return contexto;
}
}
return FALSE;
}


window.onload ÷ Iunction()¦
//Recibimos el elemento canvas
var ctx ÷ cargaContextoCanvas('micanvas');
iI(ctx)¦
//Creo una imagen conun obieto Image de Javascript
var img ÷ new Image();
//indico la URL de la imagen
img.src ÷ 'logo-desarrolloweb.giI';
//deIino el evento onload del obieto imagen
img.onload ÷ Iunction()¦
//incluyo la imagen en el canvas
ctx.drawImage(img, 10, 10);
}
}
}

/script~
/head~
body~

canvas id÷"micanvas" width÷"200" height÷"100"~
Tu navegador no soporta canvas.
/canvas~

/body~
/html~
Podemos ver el eiemplo en marcha en una pagina aparte.
En el siguiente articulo vamos a mostrar diversas maneras de acceder a obietos Image desde Javascript para
mostrar esas imagenes en el canvas.














tro e[emp|o de d|bu[o en con e| AÞI de canvas de| n1ML 5ţ en e| que |nc|u|mos |mágenes
tra|das por d|ferentes v|as pos|b|es con Iavascr|ptŦ
n el arLlculo anLerlor expllcamos las aeneralldades del Lraba[o con lmaaenes en el elemenLo canvas del P1ML 3Ŧ
ConLlnuando con esas expllcaclones veremos ahora cómo plnLar en un llenzo dlversas lmáaenes que exLraemos de
varlos modosŦ
La idea es experimentar con el dibuio en Canvas por medio de una nueva practica y a la vez repasar todos
los modos que existen de obtener una imagen por medio de Javascript, que ya explicamos en el articulo
Distintas maneras de acceder a obietos Image Javascript.
Como ya se explico en el mencionado articulo, existen diversas maneras de conseguir obietos Image en
Javascript, que luego podriamos pintar en un canvas. Lo iremos viendo directamente sobre el codigo Iuente
de este eiemplo:
1.- Traerse una imagen que hay en la página: por medio del metodo getElementById(), enviando como
parametro el identiIicador de la etiqueta IMG de la imagen deseada.
//Creo un obieto Image con una imagen de la pagina
var img ÷ document.getElementById("im1");
//luego la dibuio en el canvas
ctx.drawImage(img, 10, 10);
2.- A través del Array de images: Tambien de una imagen que haya en la pagina, en una etiqueta IMG. Al
array accedemos con el indice de la imagen segun orden de aparicion en el codigo HTML.
//consigo una imagen desde el array de imagenes
ctx.drawImage(document.images|1|, 122, 20);
3.- Creando nuestro objeto Image: Que es la Iorma con la que trabaiamos en el articulo anterior. Y por
tanto no vamos a repetir las explicaciones.
//un obieto Image
var imagen ÷ new Image();
imagen.src ÷ "http://www.desarrolloweb.com/images/iconos/usergo.png";
imagen.onload ÷ Iunction()¦
ctx.drawImage(imagen, 330, 195);
}
4.- Especificar la imagen en formato data:url: que es una cadena de caracteres en Iormato Base64 que
permite especiIicar elementos como imagenes a partir de codigo, pero como si esos elementos los
adquiriesemos remotamente.
//a traves de un "data: url"
var img ÷ new Image();
img.src ÷
'data:image/giI;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA¹
hkcuO4lmNVindo7qyrIiGBYAOw÷÷';
ctx.drawImage(img, 300, 200);
5.- Acceder a el diseño dibujado en otro canvas: para mostrar en un canvas el contenido de otro, como si
Iuera una imagen.
//consigo una imagen desde un canvas
var imgCanvas ÷ document.getElementById("canvas2");
ctx.drawImage(imgCanvas, 100, 120);
Este quinto y ultimo metodo permite algunas aplicaciones interesantes, como mostrar un un canvas una
miniatura de lo que hay en otro canvas.
Ejemplo completo de trabajo en canvas con imágenes de varias
fuentes
Þara acabarţ podemos ver el códlao compleLo de una páalna que uLlllza Lodos esos meLodos para acceder a
lmáaenes v mosLrarlas en el canvasŦ
Se podra ver que en realidad se crean dos canvas. Uno solo lo creamos para poder copiarlo en otro canvas.
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
~
html~
head~
title~Imagenes en Canvas/title~
script language÷"iavascript"~
Iunction cargaContextoCanvas(idCanvas)¦
var elemento ÷ document.getElementById(idCanvas);
iI(elemento && elemento.getContext)¦
var contexto ÷ elemento.getContext('2d');
iI(contexto)¦
return contexto;
}
}
return Ialse;
}


window.onload ÷ Iunction()¦

//cargo un camino en un canvas, para luego traerlo como imagen
var ctx ÷ cargaContextoCanvas('canvas2');
iI(ctx)¦
ctx.IillStyle ÷ '#990000';
ctx.beginPath();
ctx.moveTo(50,15);
ctx.lineTo(112,15);
ctx.lineTo(143,69);
ctx.lineTo(112,123);
ctx.lineTo(50,123);
ctx.lineTo(19,69);
ctx.closePath();
ctx.Iill();
}


//Recibimos el elemento canvas
var ctx ÷ cargaContextoCanvas('micanvas');
iI(ctx)¦
//Creo un obieto Image con una imagen de la pagina
var img ÷ document.getElementById("im1");
ctx.drawImage(img, 10, 10);

//consigo una imagen desde el array de imagenes
ctx.drawImage(document.images|1|, 122, 20);

//consigo una imagen desde un canvas
var imgCanvas ÷ document.getElementById("canvas2");
ctx.drawImage(imgCanvas, 100, 120);

//un obieto Image
var imagen ÷ new Image();
imagen.src ÷ "http://www.desarrolloweb.com/images/iconos/usergo.png";
imagen.onload ÷ Iunction()¦
ctx.drawImage(imagen, 330, 195);
}

//a traves de un "data: url"
var img ÷ new Image();
img.src ÷
'data:image/giI;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA¹
hkcuO4lmNVindo7qyrIiGBYAOw÷÷';
ctx.drawImage(img, 300, 200);
}
document.images|1|.src ÷
'data:image/giI;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA¹
hkcuO4lmNVindo7qyrIiGBYAOw÷÷';
}
/script~
/head~
body~
h2~Canvas que estoy creando con una serie de imagenes/h2~
canvas id÷"micanvas" width÷"500" height÷"400"~
Tu navegador no soporta canvas.
/canvas~
p~
div style÷"display: none;"~
h2~Cosas que pongo aqui para acceder desde Javascript/h2~
img src÷"canvas-html5.png" id÷"im1"~
img src÷"logo-grande.ipg"~
p~
canvas id÷"canvas2" width÷"150" height÷"150"~
Recicla tu navegador!!
/canvas~
/div~
/body~
/html~
Este eiemplo se puede ver en una pagina aparte.
En Iuturos articulos mostraremos como podemos alterar la Iorma de las imagenes dinamicamente, para
mostrarlas en el canvas con algunos cambios.
sca|ado y recorte de |mágenes en e| e|emento canvasŦ Como camb|ar e| tamaño y
recortar |as |mágenes a| d|bu[ar|as en e| ||enzo de canvas de| n1ML 5Ŧ
n pasados arLlculos del Manual de Canvas esLuvlmos vlendo cómo lnclulr lmáaenesţ es declrţ como dlbu[ar el
conLenldo de una lmaaen en el llenzo de un elemenLo canvas del P1ML 3Ŧ Seaulremos con las expllcaclones en el
presenLe LexLoţ ofreclendo unas noLas adlclonales sobre el LraLamlenLo de lmáaenes en Canvasţ que nos permlLlrán
redlmenslonar v recorLar las lmáaenes anLes de plnLarlasŦ
El metodo es bien simple y consiste en invocar al metodo que dibuia las imagenes, drawImage(), enviando
distintos iuegos de parametros. Anteriormente ya habiamos trabaiado con este metodo, que como debemos
saber, pertenece al obieto contexto de un canvas. En el pasado lo llamamos simplemente enviandole la
imagen y las coordenadas donde habia que colocarla. Ahora vamos a ver los otros dos modos de invocarlo,
por medio de parametros adicionales, que nos Ialtan por conocer. El primero de los modos de invocacion
permite escalar una imagen y el segundo recortarla y escalarla en un mismo paso.
Escalar una imagen
8edlmenslonar una lmaaen es sencllloŦ SlmplemenLe Lenemos que lnvocar al meLodo drawlmaae() envlando además
las dlmenslones de la lmaaen que queremos que se dlbu[eŦ l naveaador escalará la lmaaen para que Lenaa las
dlmenslones que lndlquemos v lueao la plnLará en el canvasŦ
Las nuevas dimensiones de la imagen a dibuiar pueden ser las que deseemos. Pueden incluso no ser
proporcionales a las dimesiones actuales, en ese caso el navegador estirara la imagen o la achatara para
adaptarla a la anchura y altura que hayamos indicado.
La manera de llamar a este metodo del contexto del canvas es la siguiente:
drawImage(imagen, pos, posY, anchura, altura);
Este metodo dibuiara la imagen en la posicion deIinida por las coordenadas (pos, posY) y con la anchura y
altura dadas en los ultimos dos parametros.
Asi que podemos ver un eiemplo de codigo escalando la imagen:
var ctx ÷ cargaContextoCanvas('micanvas');
iI(ctx)¦
//Creo una imagen conun obieto Image de Javascript
var img ÷ new Image();
//indico la URL de la imagen
img.src ÷ 'logo-desarrolloweb.giI';
//deIino el evento onload del obieto imagen
img.onload ÷ Iunction()¦
//incluyo la imagen en el canvas escala muy pequeña
ctx.drawImage(img, 0, 0, 50 , 24);
//un poco mayor
ctx.drawImage(img, 70, 10, 80 , 38);
//tamaño natural
ctx.drawImage(img, 160, 20);
}
}
Este eiemplo dibuia la misma imagen tres veces, dos de ellas esta escalada a distintas dimensiones y la
ultima esta a tamaño natural (sin redimensionar).
Puedes ver el eiemplo en Iuncionamiento en una pagina aparte.
Recortar y escalar una imagen
l ulLlmo modo de lnvocar al meLodo drawlmaae() es un poco más comple[oţ va que le Lenemos que lndlcar Lodos los
daLos para poder recorLar v escalar la lmaaen anLes de dlbu[arla en el canvasŦ La llamada Lendrá esLos parámeLrosť
drawImage(imagen, img, imgY, imgAncho, imgAlto, lienzo, lienzoY, LienzoAncho, LienzoAlto)
Entre los parametros, "imagen" sigue siendo el obieto imagen Javascript que queremos pintar. Todos los
parametros siguientes los podemos entender a la vista de la siguiente imagen:

Podemos ver a continuacion el codigo de un eiemplo que realiza el recorte y escalado de una imagen.
var ctx ÷ cargaContextoCanvas('micanvas');
iI(ctx)¦
//Creo una imagen conun obieto Image de Javascript
var img ÷ new Image();
//indico la URL de la imagen
img.src ÷ 'sagrada-Iamilia.ipg';
//deIino el evento onload del obieto imagen
img.onload ÷ Iunction()¦
ctx.drawImage(img, 177, 11, 120 , 234, 10, 10, 90, 176);
//tamaño natural
ctx.drawImage(img, 160, 20);
}
}
Este eiemplo dibuia una imagen un par de veces. Primero recorta un area de la imagen original y la escala,
por el metodo de drawImage() que acabamos de relatar. Luego dibuia la imagen original, sin recortar ni
escalar, y la coloca al lado de la otra, en el mismo canvas.
Para acabar, deiamos un enlace, de modo que puedas ver este segundo eiemplo de trabaio con imagenes en
canvas.

 /08,77440- .42

2,3:,08

2,3:,
.,3;,8 
92 92  ,3:,/00020394,3;,8/0%0306:0,5703/070248,/-:,784-70480348 :9,3/4 ,;,8.7590!/0,3;,8   89,/4/048.,5J9:48  
":F08% '0702486:F08% 8:570;8O3/0902545,7,.43;07978003:3,0850.1.,.O370.4203/,/,,8 34;0/,/082E8831.,9;,86:0574547.43,7E 397,7  
3974/:..O3,,3;,8/0% ,3;,808:34/048.42543039082E834;0/4848/0089E3/,7%6:087;05,7,/-:,7 /3E2.,203902E030803:3,5E3,0- 397,7  
0254/0/-:4.430!/0.,3;,8 &35720700254/0/-:403:30020394.,3;,8/0%.430!/0.,3;,8,;,8.759 397,7  
3903/070034/0.,3;,8 '070248.O24080034/0:3.,3;,8 1472,/4547:300/0.447/03,/,86:054/0248:9,75,7, 548.43,794/4848/-:486:06:07,248.44.,7030.,3;,8 397,7  
-:,770.9E3:4803:3,3;,8 O24/-:,7.:,/7,/4870.9E3:4803:30020394,3;,8/0%20/,390,1:3.O31#0.9  89740#0.9 /0,;,8.759 ;E/,03% 397,7  
%7,-,,3/4.43.447/070034/097,,/403.,3;,8 3E88/0/48,97-:9480803.,085,7,,83,7.447,48/-:486:080,.030300020394.,3;,8  97-:9481$905,7,0.447/07003489740$905,7,0.447/097,,/4 397,7  
,234803,3;,8/0% '0,248.O2470,,7/-:4803:3.,3;,8.43,81:3.43085,7,.,2348 6:05072903,.70,.O3/0 0897:.9:7,82E8.4250,8 397,7  
0254/0/-:4/0.,234803.,3;,8 $0:3/40025484-7048.,23480300020394.,3;,8 /43/0;070248,81:3.4308.480!,9  89740 397,7  
,234803.,3;,800254 O24/-:,7:3.,23403.,3;,8/0%.43/;078,8;,7,3908 .077,/483.077,7 .43483 70034/0.447 397,7  
9748002548/0/-:4/0.,23480300203948,3;,8 30890,79J.:4;070248497,857:0-,8/0/-:4/0.,23480348.,3;,8 397,7  
:7;,803.,2348/0,3;,8/0% 48.,2348034800203948.,3;,8/0%5:0/0390307.:7;,8 6:0.4380:24854720/4/048 ,7.48 ,8.:7;,8.:,/7E9.,8,8.:7;,8-007 397,7  
-:4/0.:7;,8.43,7.4803.,3;,8 O24/-:,7,7.48 5,7,,.07.:7;,8-,8,/,803.7.:310703.,8480203948/00,8 030034/048 00203948,3;,8/0% 397,7  
:7;,8.:,/7E9.,8030.,3;,8 ,8.:7;,8.:,/7E9.,8843:39540850.,/0.:7;,6:080/013054797085:3948 /485,7,03.413/0 ,.:7;,49745,7,8:903/03., 397,7

8548-08..05..3.N470.8/0 %6:0/-:.8 -:..8 397.:.479.7/-:.709./7E9.7.2..234803.43.3.8030034/0.3.870/43/0.7  .9E3:48.480300020394.:7:3.7.8 97400254/0/-:403.72E0308030.3.-.0/07.6:07954/0.8 ...8.43086:3....70.7.8.43086:3.8/0% 397..2.8547 /10703908...J/.:2482E030897.2348./470../. /-:.3.:.03030034/0:3.8.7030.4790/02E03080300020394...759 397..../00850..3.:7..43.7...3.3.307.2-.8 8.8/0% :8...1.7  &8.:7.:7..3.3.7.9..8 /0% 397..3.F8/0:3002543907.4/097.4.8/0% 0306:03..4790032E030803.2.8.7..24897../.2E8.43903/4/02E0308034800203948.870/43/0.8 3907...7  :7..9.J.4 7E1.4.97.8 424..8 397.7                    ..9E3:48..803.8/0..8.3..3/4.450729/4 1 5 53 5.70.43449448 '0248..4-09482./470.430!/0.8007843..3.307..7  8. #0.800703.82E0308.4250..

.7 %570903/0574547.43.7.2502039.82:./4708 54746:0.:..97-:948023.8O3/0902545.8843..79086:01:3.7E894% $0331472.70.O3%.43.7744.0847.830.33.1.4 .7348.848 54/02480250..7.7....2039025479.0308:.43080-2E8 5.07..7:5.47.6:07..1.907J89.20390033:0897./.....774.. 54897048:8:.89.748 6:0903032:./40308.:0397.89.8.574.../08/0../47570107/4  :E3/4089..3/4.774.078O3/0 03:./0870..8548-/.79J..0-80.854748/8939483..0.:2039..O3 70.73:0./..'0702486:F08% 8:570.48/.1...43..08  00..030   ":0700894/0.7..30.078O3/003:.425.4390730954707  2502039.../J.834.-.8..8/0.8/0./03.7.O3% %80570.0.30394/48483.8 .8/0/08.438: 3.0.8.8!86:050729.07.:36:08O480.0./085.008/85.248...47547.5478:5.. 5.85.77440- 8/0..425.07/.8/024/073403:...20390 8346:0..78O4.708 !479.32:.884547903 9.8072502039.89.344J..7.7..8  03:35:394/0/08.6:07.-48:0850./48547.9.....:0397....1.1749../4  6:0./07./0870.E  8J5:08 %08:3./0.7470.84-477.:77.3/80N.425.7084.20390/8543-08/003:..:.7..77446:08003.O3/02502039....870./4 89480.08   ././4708.O36:0344...80.F089F894.:.:784841./.3/4 :3.0850.6:0:9..O370.:2039 -09.5.:4..7..70.9..8089E394/.0/03/40305.1472.0.5E3.903076:0 08507.4308/008.9-08.0 /08..87.9.9-0 44-89.1.5./47083...0.039.6:0/08.79474 /43/08:00.0.7.7.0480089E3.O3/03974/0:33.8/0% .E3/4484348/08.3.:/4054F2.86:0574547.394 2:.8:9/.43.8.-.85.8.0-86:034843.907J89.:3.0..5./..J...24/4/0/0.:8.76:F080.4308547.8O4...482O/:48/893948 .7.O3  47.82.7...08.397.7.6:0.70.08/..42 1:9:74/0/08.6:03408825020390:3.0/..0/0 2.390089..203903408:89..6:0..08/048/08.2486:F308843486:0089E30.8/0..07303908.43.O3% 834:3..907J89.43086:0...46:0.4203/.86:008.0.8/0%70....5.3.754720/4/090./4/00850.42E8..0/07.43.005072039.3.7E    30./4708/0207.:47..77440- .70..3:0.0.77440-% 05.7.0  #08:9.8096:09.424 0850.7.6:013.8 ..825020390030939074 ..078O3/0/./4708.NJ.3:0. 407.8.6:094/4848748078 .:..8/0%089E3. /04 54.8.4203/..:3483./082E8831...-9:.9.790486:0.907J89.4308.390 0305047/048.07843082E83:0.80850./0 70..86:08003./47.03/7J.7.80850.8 ..5.7.3..7:3.86:0089E303/08:84480:9.../4708 !./.4308 03970.7.43.34.1.3/4.078.43./4708 3.078./ 5.8 .894/48483.3:0./45472:.43./4 80089E3 /4..7.6:0%089E1472.7..3480308507./.0  4.20390807E5708039./04800203948/0..07978003:3.8J 5:08946:0 .8 2.4323:.70../0.3907475:-..7.9..8/0.8  89./.7.20390.746:0 5.20390% ./4734256:01.089.8.5E3.7.3903.05.:.907J89.2:.7 %348029..0/02./4  97.3 O O O % %  .8 .O3089E03 3.8.248.0.774..8! 6:0903/7E36:08072502039.07:38940- .0 86:070248.303.7.76:0.4/0  ...8 57E.:077.35..6:0:3.O3/0/.-030394/48 4888902.

834.85E3./0.4254303906:0507297E/-:.8548-/.34 5.J/04 09.2.424.748!.7 6:08090723035.40020394030 2.03..0-03 3:0..% 54720/4/0:3!  3/0.43038330.7047E1.308948/0.7.096:09.0/08.4.39/.7.39071./0 3.84408  50745038.954/0..39090254/0574.O3 46:0507297E.8/0:3.-.08/.4846:0089E0.5E3.3:.4./086:03484170.81:3. %507290.43480-47078  5.07848E2-948 424/0.089.0.43903/40850.7908/0:3.7 03.3/40308.8096:09.803/.80-8054/7E34..47707E.3907.F8/0:3! 8.80:9.. 807E3023.097.85.6:08054/7E3 /08..2-F3/0:3!5..3.O394/.//0089..80:9..7.../4708 09.7 /.43...4.-.803E70.7../47 50746:08054/7E370.3907309  044.839071.949..74 8.850.8 8346:08:54302047.0250.424.:/4 .:034.47J.394902545.94/4954/01472.0-54720/4/0....3.-0.6:0/.7./..7..6:00:8:.:8..85.7.8!85.7085438.743.430.5E3.0-.4.434.703:3.7.79.8 .O3  :0..-..5.-.3.43486:054/7024897..3:9.9.74/0485747.32../48.7:5.89.43903/4035./08/031472.-.8708543/07.7434903.83089.20475476:F%08:3 5740./43335:3 !:0/08.43.77.:0754.7 54720/4/0.42 .2-F3034.7.248..84.203945475.43.85.423 1472..73:0.5.0 97.86:0089.9:7.8 6:054/7E3089.4308.08/.86:08030..9.7.8089.32.8 5074/03974/0.94/0:3.77.2.3.8096:09.424.0803./0.7./48.47547.0...J..344J....03./003:.8070.7E3.43.43039.0390.89.5E3.890.94.4308.2039054720/4/0:3!6:0 50729..J/04 47.703:380:3/45.86:0.7/024/46:01:3.7.4240/7.808/0/.0850.:E08843. 5E3..430.8..-.808:33:0..43080.7497.. !.  ....20390/0$$  424805:0/0.7.6:08054/7E 97.7 849.-.9.774./.8/05708039.7.794/..8J.3/49.7.:9.O3/0 /4..J1./0.//0 /01370./...3..3907309  0-47078843574.-/.43. 30.5E3.3/08.7497.:20394 08/0.7E3433041130 ":E88003903/..J1.:././.7.05.4250.85..77440- .  96:09..O3/0:8:.248 348O48097./47507297E0:84/0:3.08.O3/0 .7 6:024/1./454700203948 .8096:09.85.1.O3/0%83.:3...43903/40376:0.07.0.7.5708039.89.424.80850.70..43080-6:01:3..044.84023.47.O3./08/0% %3.8J. 50 3./48.80/0/. .....4 .5./4           .86:0705708039.47547.79089J5.9484..790/0 3./4 .75..7.97.08 807E33.43.9.70.89..43080- 1130897E4974!5.8.078489548/0.0/.-.4308/0:3! 03. /745 .47.8 6:01:3../08831..2-.8  O O O O O O O O O 897:./0:8:.8.0480/8543/7E9.86:0903036:0..74902.-47.47547..7 .07.424.4.9484.0.08/0:8:..8096:09.3 1:07.:34/0.5.0/.//090307389.08486:0706:0703-...897.6:008507.07 0897E3.80-890303:31472.7E3 096:09.072E884-7008903:0.2./.7744/094/4954/0 .

.

f°f¾ ¾° ¾n¯½° ° ¾¯h¾° ¾¾  ¾h° f@. ¾ ½ff  ©f °h¯nf¯ ° ¯h– ° ¾ °°f½h–°f  9.– °– f   °n° .

° °  n¾  ¾fJ n¯ - ½ n .

 ° n°ff¾° f ¾°  ¾f° ¾°f f¾ ½ ¯¾ ¯½ ff½ ff ¾ .½–  @.

f°f¾  .

:4 390730954707 34 845479...8/3E2.089.7486:0/08003..:3480025486:0805:0/..7598 /-:.8 ../476:0:9.25J.85072900850..43080....34903/7E6:0/.790/048:8:.89.3..08903:0.7../47082E824/07348  425.O3  30890.8.8.8  003970483.7 703/07..-08:3.07...6:0.07.3..:4488:03908570903/0248/.2:70.F8/08. 89:...9.434.7-70890.5.7.47547..4203..1....3974/:.07/0..f°f¾¾–°€nf ° ¾½f³f–f¾n¯ ° ¾ h¾nf¯ °  ¾ °h f ° ½ ¯¾  ©fn¯¾€ f ° °  0020394..07.08.06:094/.92.43.088O43486:0/.9:..70.5E3..7:3E70.J./03907309547072E89../470302420394/008...79J./4803.6:05.47547.O3. 9¾ ¯ ° f¯ x°f¾ f ½f ½°f –f  ¾ n¯ €½ f  !4746:070850.4720 08:33..:36:003/.94708/0 08.3904857O248208084./47082E8.3.9454707.0282424947/0703/07.-9:.O35475../47 46:02047../4.434.2-0/:7.3..2.0..8507290.//0.3./47 8346:0706:080/08.86:0..370807./4:35:35.3.547845479.//0% 2034808507.97.0.77440- .O3/0.3.3.8.78454790089..8080257054F2.:9/.2-F3845479.748 6:0:9.43083.7E.42390708..7.80306:080.74 .47.85E3./..0./..078485740.3./03 8:3.8./3900..480..7.07848170390880.7.07 ..7..547.0..3:0..43907309 54707 .0./48  !4F2.48/08../.3.8548-/.3054707 3454/7J..57450/./8543-/.48 807.:9.8 5.7.480-2E8.3.3.7.78454790.79J.8 .85.:9/.3.9.0.-.5.7908/0.7 5474 6:09./0.1.5705./08/0.47J.0/07./470803.7.84170..3:0.N48 5:08946:0..039.0..7.248 /..431:3.  .349.9-/..9.8 507408903/.00020394.//0089./.8 D° ¾½  ¯f¾ nf°f¾ ¾ ¾ n  f©½½ f °  nf ½½  ¾ n  nf ¯½ ¾f f fn f f f°– ° f  f f¾½ f ¾ °   ¯ °½f°¾  °n°f f f©½f ° ¾ f n¯½f³f ¾  n f³f  ff ¾ °nf °€¯ff   ¾ ½fffn n¾f¾¾¯f ¾n¯ ¾  I  ¾– f°f½x¯nf¾  ffn ½fn°  ¾   ¯ ° ° °  ¾h° f @.../475../0...7908::9.7:3../08454790/054707 .7.-020390.4203/.743335:30303..3574-.O3.8 nf°f¾¾  ¾f°nf¯ ° ½½½ ½ff¾°f –f f€f –€ f  ¾f° ff ½f –f°fn°J@J½ff°n½ff@.3480.40020394/0% !4700254 08900 5740.089..:8.7/0490257./43/080:9.774.8 34807E30.72E0308 46:0.08:3.3.O38008507..8548-/. %..48..6:05470784547900/-:4/6:0 507290.6:0./43/0805:0/0 ./0 48:8:...0348 3...43.1.07.9485:386:05:0/03./08/0.8 89.25.3./08/03.8 1:3....3..3.8  $302-../46:0$.5E3.078O3/03.

4089E3/./0:84/05.3/4.9.20390. 6:0802570.54.2039030.20390550.8 .7.9:..282./..08.03.47547...8/03974/03:0.7/003:.43/.1479:3.-7O.O30897.90390 -07.903908-708 3.6:0.0%  5..80 13.  .5../3900.57450/.7.5.3./0.4308/0:84/0.3..

.3.:3.0 3.8/0.70853 :30/947/0.5.854/024803./.7.7/. 4440.:48./0%                     ..3.0-:9..f°f¾½ ¯   ©f °f½h–°ffnff °h¯nf¯ °  ¾¾  ©¾ ½¯  ¾n½¾f °  ° f f¾fnn° ¾ ¾f @  ¾ f°f¾½¾  f ¾ ¾f°–f° ¾n¯f¾  ¾½° ¯¾n° ½–° f¾  °  ¾½ nff ° fn° n° ° ¾ °h¯n¾ f¾f½nfn° ¾½ °¾ –f° ¾n¯ ½ f¯¾¯f–°f  ¾ © –¾  € n¾ °h¯n¾ °° €fn ¾ ¾f   ¾ n –   ¾–h€n¾  f½nfn° ¾  € n¾  n  .79J.070248002548/0:84/0..9:.3.85...20390..O/4/04.7.805.4397.08....8.85.3..7 3484974828248089.3:0.077.43.89480-..0784803./0.70248..O2454/0248:9.43002548/0:84/0 08900020394/0%  3488:03908. 0397.8: 1:3...5.84-70.43082E834.7.0/48.20394 /43/0805:0/0/089.2039.

 0025480-...7.-703/4-4.2..70248:300254/0/-:4/0/4870.8.8.3..79003.7E31..4203.20348 -E8.803:3:.44708 6:070.48/0..8 fn¯ °n ¯¾¾f°  ° n ½ f½h–°ff  f..390.6:0.O3..70248/03974/00800020394 4870.70248:3034.n° 9 nf°f¾ ff¾n½   ° fnf°  ½nf¯¾x f   ¯ °nf°f¾ @.759 $4-7.43.57207.48.759 ..7.434..:348.43/893948.8.3.7908 572074:3.8  44.76:0.4308/0!/0/-:403. 5E3.075.....5.-.435747.%'$:04497.44..770..3.203948..7595.8.9E3:48.304 5074.5.9E3:48.3.2034854/70248 .7..03/485.54/0797.820/..7.7..7.434...890302:.3.6:0/-:.746:000020394 .096:09.700020394%.07:3./0.3/40:35..86:0/0-0248. .9.. f¾ ½ ¯¾½f¾ff °½¯  © ¯½ fn° ¯¾¯½ff ¾ n ¾  ¾fJ n¯½ f°n°n °  ¾ °  ¾¾ ¯f   !.D°½¯  © ¯½   © °°  ¯ °nf°f¾ @.7/01:3.7849E3/4348038:2.57:0-.7/03:0897.8.430..70248 :9.03.

  .5.-I ¾f  f n¯ nf¯¾ €¯f½f   ¾h° f @.7.8  -7 !471.425.47 :9.3..3....3.8/2.7: 507../470834.  .0.1.9-08...7014 7420 $..483.43.8/9 09  8909094802:0897.

8 00203949030.9:7.703:3.3.7.3/.44./0...8..3/.7..97-:948805:0/03...7.42454700254890 5..3.8/008945.4:04701077348.89030248..8/00890.759 ¾ °  ¾f¾€°n° ¾f¾f¾½ff  ©f€¯f¾ff ¾ °°nf°f¾ -¾¾½ ¯¾n¯ °ff¾ ½fffn   ©¾¯h¾n¯½ ©¾ 9  ° ¾ nf¾f¯¾f ¯½ f  ©f° °½f ¾ °nf¾€¯f¾ -  ¾f° n¯  ¯¾f¯ x°  ¯¾fn f° ¾°f¾n¯½ fn° ¾½ff¾f ¾ °f –f   ¾h © nf°  ¾f½h–°f ¾n¯½f  n°nf°f¾  .07700397020/..7.3...0890.0..907J89.390.8/08/0.7.096:09.0850.97-:948/0 4.850...7486:0039703.7.. .348 :8:..307.43..8  9748.7.97-:948 97-:94/ !...854/024808../47086:03484547903..759  97-:948/909 !.3..94/0034  !39.70:3342-703..:7.5079:7.8.0..../0E70.7/02.820/.'$  !.83.1.45.3.8..748.7-7:390946:0807E46:0.7.433../01370.3.7.

4308/0 /-:4 574.3.3/46:070248539.0/07.4.3.4.203900.08:0390 .:..0/07.....0848251./4807J.784-70F90302486:0..439094/0 703/07.7/8939482F94/485.81:3.8 84-7006:054/702483..7.3......3..8089E03-../4/0.

.

..3.#0.8/4.-24800020394..8 ...7.8   ..3.3..:2039 0902039/ 2.

.

7 .439094/0 / /00890./-:..3.439094..8 0943909 /   ..7....3.8 30..0/4.08.7..745.

.

8.0/4.424/080084-700.439094/0.-47...8 :04..8 6:00806:09030.-07800.8 .439094/0..3.4308/0/-:4 '0. 539.J..4394/48483..9-0.425.4308-E8..030.....248 0890.439094/0.75934843.7E20974 6:0 080.34..0.-7E6:0 .9-08.8.43..439094 1#0.83897:.3.3.:9.39482F94/48.3./473480.3.7482F94/486:087.84 6:003.7.8.08.0..9      !72074..7030034 !479245:0/400.7.79..42E80..7.7434.6:0805.5E3.:9..073./4 6:0.4302F94/40902039/ 4-903400020394/0..07:3.8  . 089....O/4 :354..8.7./.0.425./4708 54746:0.8..700203948030034  424/0.85.7.-:4030.430830.8.8/8939..42574-..035..85.4245..8803903. /-:..42574-.8 5.

.

:2039 0902039/ 2.8 ..8  ..3.#0..70020394/4.-24800020394.3...

.

O384-70803.248:30020394 .42574-.4397..

.

9-/.430943909 6:03/.439094.425./....43.54/0248097.078:.3..8 1 0020394 0020394 0943909  .

.

.08...3.7.439094/0 / /00890.745.4390940020394 0943909 /  1 ..0/4.7..8 30./-:.439094  ..7 .

.

7.$90340./-:./4-035:0/40250.439094/086:094/4.7 .

.

439094 1#0.42034/-:.9E3:4 .9     .3/4:370.

.

.  ..2-40..447/00894/0/-:4.744 .439094 1$90 .

.

92.430-:4 .5E3..4380:248.:9.8.3907475.8.089F..70.0394434.6:0805:0/.7.70.7.5E3.943  .//0-4//0./../-:4497470.03903/072E81E.9.:.759.3.700..9..7.7./1:3.-7.43088O4.:7845.43.3/4.00./1:3.70890497470.430.8  -0354/0248:9.:3. 6:00800.8 8944.7.9E3:4 . -4/434../45.83.439094 1#0.430...7.1:3.430-:4  .20390  47.48.O/4..20390/08/0:38.547 .42509489.8O41.4507.7089.759 3/4 434.42039.O/4089E.7.0394/70.746:0903/702486:0.5.9      < < .

.

.3897:..8 < ..3.4308/0/-:403.

8.3./ 990!74-.8807J.425094/03:089745720700254/0:84/0.08:0390 92 0..3..3/4..O/4...

759 3/4 434.943  .990 8./1:3.

.

-24800020394.3...#0.70020394/4..8  .3.:2039 0902039/ 2...8 .

.

O384-70803.42574-.248:30020394 .4397..

.

.430943909 6:03/.9-/.3.078:.54/0248097./...425.43.8 1 0020394 0020394 0943909  ..439094.

.

.8 30.08.439094  .0/4..7.4390940020394 0943909 /  1 .3.7 .745./-:....7.439094/0 / /00890..

.

7./4-035:0/40250.$90340.7030...439094/086:094/4.8 .3./-:.

.

439094 1#0.3/4:370.42034/-:.9E3:4 .9     .

.

439094 1$90 .  ....744 .447/00894/0/-:4.2-40.

.

439094 1#0.9E3:4 .9      < < <  ./-:4497470.

759 .8.

.7.0.  .8/2.47 :9..43.425.3.9-08.0.8/9 09  8909094802:0897./  -4/  .7014 7420 $.3.....8  -7 !471.5./470834.1..483.3..7: 507.

3....8  .

-4/ .

03:3.7.92 !4/0248..5E3.07000254032..790         .5.

05.096:09...08.43.70.447/03.096:09.97-:948/90903.8:00/0.9:7.248.70248548.700203948030.79J.5E3.6:07954/01472./0034  034574/:.79J...7.8:507476:07/..439094 1#0.8.:7..3.90307:3.794/4848/-:486:06:07.030...7/-:48  0/0.8./.07348547F70.4708 ..447/03.8./4547./45478:./0..548.4  !...3/08/0 .759 30890.7030..:7./..907J89..803/48 /20384308 6:0.02483/.. 05:394/013/4547 /9  09  480.85. -:.7..5..4348. 05:3942E24/0..8:9..:7..43.07:3/-:4030./-:.890302486:09030703.03.79J.08034850./-:.8../46:005:394/0.8/203843083/.8. .82.7.447/03.    !4/0248...7.447/03.3.880.3...75903.3.8/0% #0.8/0./.394 .3/43:08974857207485..8. 096:09.8J6:0../0..:4.4370850.3.3..0708:0390/.086:3.086:3.086:3..30574.08  03943../4547:300/0.3./070.75.7.3/4:38..3..6:075:394/03974/0.13..3.390747 ..:039.8:507476:07/.3.  49.3..248 .8 1472..O24080034/0:3..8/03:08974034.8903/7E:3.089./.9030248:3../.8 6:0.:.8 O O 44.   803/46:0.44..43..2486:05.8480300020394..807E05:394 .4203..7.7../.803:3 .'$ !4700254 8.447/03..2.7:370.9      .0..7.../0.8 .9:7.7.089.2.:4.447/03.7.94..447/03.79086:0 3907.748..'070248.89.248:35720700254/0/-:403:3.447/03.8..N4 2E24/0/909/013/403..3.9.08 /9  09  5476:0..434850..830.86:0 54/0248:9..390747 .447/03.3.9:7..248.447/03.:4.43.3.-.07 3000254/0./.8/20384308.548.:.8..03./...0845.47/02486:0030.7.8.310747/070.43./.08 .7.86:054/0248 24.8    :.'$030.:0754/0../.447/03. .'$ !479.248/0.4203..8 .9E3:430.303 :04.8 !../.7.3..310747/070./.-.086:3.8   $0:248/.807E2034809.7030./0.

7 308900025470..80/0.43.4300020394..81472..74/008902.O35.-..42E8 0.89.4.07:380:3/400254 9..4../-:.9E3:4 4.9E3:4 48 /4892485..9:7./4708.80:7.3.08.3..070.425.86:0706:07030:84/02F94/48.O/4.3..390.8.497.43:354.708:27089.447/03.73486:003./486:00/-:4/0:370.-47.4  '2486:05.70248:3...3/46:070248097.13/0 .3.439094/0.7E20974807.7E3/4348.8:507476:07/.2-F3803./0.248.9-0.4708/0.43./070.80574.8 .3908/00250.7.7407.75930.759 .43085079303908.0.5.703:3.086:3.42574-..8..7...0/20394/0/-:420/.70.80:71.3.48/4857207485.1:3./.  ./02824  !074...:.3.7.8..2...7.7E20974884348.70..7.790/0.390  $0:3/400254/097.0702482E8.86:0 54/70248:9.86:0805:0/03/-:..8.:7.8.7.3:.3.8 !.

.

.3../47/00020394..8 .3..-0:3/0391..0.#0..8.7.

.

0.4./45.439094/0.8  .-078804-9:...78:708:9.7.84$834..7..8  .3.3..3.439094 < < 709:73$ < !4/702483.7.8 2..439094.4390940020394 0943909 /  1 .3...439094/0..943.00.3..:0.O30.439094  .3..:2039 0902039/ /....7.1:3.8  1 .54//4.439094  709:73..8 /.4380:80 1:3.44340..:..7089.7.70020394/4.3.8.439094.8  1 0020394 0020394 0943909  .439094.

.

31472.2-F3..870.7:35.390747 00254.J./-:.O24...44780297...9E3:48 :34.1472.8 < 3089000254. !.%0340..7/070./08/0.. 24897.74 .447/0.07:3.70390  .7.7089.2-./0.9.385.439094 03943..8548-/.3.8.3:.7497.2.248030..7.O2480.70.5703/248.248.3..24897.:4974..248.08/-:484-700.

.

439094 1$90 11  .447/0/-:4.: ..2-40...

.

: .439094 1#0./-:4:370.9E3:4.9      .

.

74.43:354. ..385.447.     .4/097.703.2-40.439094 1$90 7-....2.

.

74800850.248 ...81:3.4308/0/-:4. 6:03/../4/097.3.9      $3481.6:0 089.7248/0..2.O0.703./08/0  949.5..390  .3/480.2..6:094/.43/0903203942E8 ./0. 949.2483/.6:071472.4  .447.447.43# 0894831.385..385.1.:..3/49..385.439094 1#0.20390 97.07.2-O0.805.70390 .70248.:.8089.2-F30.5394:370.9E3:4.70390 .7480297..2039045.

O3 92 0...880:3/400254.425094/0089080:3/400254805:0/0..07..3./ 990.4393:.O/4.

990  8.759 .

.

#0./47/00020394...3..7.8....8 .3.0.-0:3/0391.

.

0.3..54//4....439094 < < 709:73$ <  3/4 434.7.00.943.439094/0.8  .4380:80 1:3.439094.4390940020394 0943909 /  1 .84$834./1:3.8  1 0020394 0020394 0943909  ..70020394/4..439094  709:73.7.3.3..:2039 0902039/ /.8 /..:0.3.943  .

.

.7..3..3.8 ..8 2..439094  .3..439094.7.#0.8  1 ..-24800020394.439094.

.

439094 .$90340.

.

2-40..: ..439094 1$90 11  .447/0/-:4..

.

9      ./-:4:370.: .9E3:4.439094 1#0.

.

.447.703.4/097.2.439094 1$90 7-..385.74.43:354.. .2-40..     .

.

7480297.5394:370.2.70390 .385.9      < <  .9E3:4.439094 1#0.

8.759  .

8/9 09  %:3.3...8  ./  -4/  .3.8/2.3.0.....0../4734845479..

..8  .3..

-4/ .

43..0780032./..:039.3..92 002545:0/0.803..5.9-/.7.5E3./47    .9.:089743.01.6:0.0.03:3...790 50749030703./854307/0 .425.

.

¯  ©fnf f ¾ nh°–¾ °°  ¯ °.

¯ f° f €°n°€ n%%¾  n%% ff¾n½ h f °@.   .f°f¾ @.

  ¾ ½ff  ©fn¾f¾ °° ° f ½h–°f f ½nf¯¾ ¾ ° n¯½° °  °f°  ¾fn¾  ¾fJ n¯  ° ¾  ¾fnf¯¾f° nn°f.f°f¾ ¾° ¾° ¾  ¯ °¾ ¾½°  ¾ °@.

43903/4/0.8..9   .83.  424.390747.O3.7595..79J.O030.506:0N.8 03003:.439094/0.07.447/070034 6:0803/.7 03483.24803.0.4476:080903.0.5745.:40254/0/-:4.:4.1:3.42574-.1.8:507476:07/..-477.f°f¾ @..70.9-08.4308903:0.43.:..79J..4 03..248 3903/070034/0.9:7.3.086:3.7:3.7E:3./ 894 9.2.39074720390 ...425430390 54746:0903/702486:0..43./1$90/0.5E3.1:3.5:8.:9.2-F38005.248.9 5..424.81:3.43085..9-/.248.05.2-F370..24854720/4/0803903.089E0305:394   ..7.O3 8346:0080.  ..7400.3....425.  894/-:../.0.O354720/4/0:303.3400./-:.57450/.9..0.8.0  6:0.3/4547002540#/0:3.3./403 0802420394.808:3002039484-7006:0/-:.431:7.8  .:370.425.0/05747.O3..7.8/20384308843 ...3897:.:7.2502039./470834843 .447/0700343440850.7#0.8005.43081#0.O3 .447  -f ..9:7.9 89740#0.:4..:..7 70.9  :3.8....3./02E8.8  30890..9E3:4803.4..3907.:.9  ¾f€°n° ½  ° n ° f © n°  °  ¯ °nf°f¾ ¾ ½ff  ©f nh°–¾  °¾  n  n nf½fh¯ ¾ n° ¾  ¾ ¯f  1#0.O.4203/.759 $302-.9E3:4.3.8/0.3.O2454/0248:9./470833:3.74 5470242039494/48483.0890 .7.70774708547574-02.7.O36:05:0/.:9.O31#0.9:7.79J.7.3..:7./02E8805741:3/O:354.8. .430!/0..1:3.

439094 1#0.03.8       .3/4.9E3:48807E3/05J008/0.447/03.8./.447/03.7J.43548.4203.0.-..   %4/484870.4 :0470.3.9E3:48 .548.9  ¾f€°n°¾ ½ff  ©f¾¯½ ¯ ° f¾ f ° nh°–  ¾ n ¾¾   ¾ ¯f  ½fh¯ ¾ ¾ ¾– °  .O389740#0.3.8070/070.94.O3 .¯¯¾ ° fn° °   ° nf°f¾ f° ¾  © nf ¾ ¯x  ° n ¾f¯¾fnn f n°  °nf°f¾ ½ff –°nff¯x ¾   ¾  ©  ¾f¯¾f f½¾f  f   n¯ ° f¯¾f nf ¾ ³ff fn½fff¾½ ¾°f¾  °–f°  f¾  !4700254 .:3.9      < 894/-:.4308 802570/0 5J008/0/89./.20390843.3/403.4393:../48  :3.24808:0390../7.O/4 147      .3/403.2-.:.

9   .447 /05J008/0..439030/47%/43/0 .248.8 f f¯¾° © ¯½   ©  nh°–¾ °°nf°f¾  ff¾€°n° ¾n¯ °f f¾ f° ¯ °  92 0.57450/.82.:.3./484.447/0-47/0/070.43 .8070/0.447..7030./48030.3.8/20384308/0.9:7.7..:7... ./89740$90/0 4-094/0.0-47/0/0:370./-:.307.7.0.44..7.6:046:0.:7...447/03.8  :3.9E3:4803.8:086:3.248..2-F3/-:..86:0 574/:.0-47/0/048 .447/0143/4/0..3..  .9       < 430.7#0...4 5476:0088250203900.3.3..70.4203.3./01370.8 ...439094/0.248.3.248:3.7700348/0.9E3:4.89740#0./40.6:J3425479.870.:7./ 990.8O38O4 .O/4.  147      .3.3.70.O3.:.3907479.O3/070.9:7./7.8.0.248.  -:..9:7.8 .:7./7..:36:003089.6:054/0248..9   .0147  02.9E3:4 :9.3..2:.83.439094 89740#0.7 5.4.8:507476:07/.8  0254/0...9E3:48.9  ¾f€°n°°¾¾ ½ff fh f¾ nf°–f ¾ °nf°f¾fn f¾f¯ ° f°¾½f ° ¾¾° n° ° –h€n °n°f ¯f° f¾¯ff¾ nh°–¾  .070-:.83089.7#0.47#6:0/08002485.9:7. ./.3/403.O3   5..548..43/8939.8:09.

990 8.759 .

.

3...8...8 ..#0..7./47/00020394.3.-0:3/0391.0.

.

:2039 0902039/ /..3./1:3.8  .3.4380:80 1:3...54//4.3.:0.943.439094/0.4390940020394 0943909 /  1 .8 /.00..0.84$834.7..439094  709:73..943  .8  1 0020394 0020394 0943909  .439094 < < 709:73$ <  3/4 434.70020394/4.7.3...439094.

.

439094  ..#0.7..8 .7.3..3.439094..8  1 ....439094.3.8 2.-24800020394.

.

$90340.439094 .

 .

.

439094 1$90 .9E3:48 .  147      .447/070034/04870...2-40..

.

447 .:370.9   /9 09 /-:.9      < .1#0.439094 1#0.9E3:470034/0.

.

.447/0./0-47/0/070.439094 89740$90 11  147      .9E3:4 .2-40..J30.

.

89740#0.943-477.7.9   /9 09 /-:.7*5.439094  .439094 89740#0..7.7.0-47/0/0:370...8 2..9E3:4 .9       < < <  1:3.8  1 .  .3...3.439094.439094.

.

439094 .70390 .3:.7#0.7/0.0.:3E70.3.9   /9 09 -477.7#0..9     < <  .97..385.9.70..8/0E3/4.0.

8.759  .

9-08.0./0 7014 7420 $../47 &8...3./  -4/-.1..059454707843..0..3...078O324/073.0.8/9 09  43903/46:08O4..8038:3.894/48483.07E348:8:.3.7486:034845479.3./47080. .3.7  507.425..8  .:3.4471111  .8/2.43..

7*5....70143. 477./45.-477..7..7..8 ..3.

.  .

-4/ .

3..8 41.07000254032.8 .2486:0.8.248030..:.439094.1:3..O3-477..//013248:3.4770.248:3E70.749748 .5E3.439094/0.7..5..0.-.83/.390747.2..3.9E3:48 :894.1:3.3907470025480.070248.03.7.-.1:3.780  43.790  8507.5E3. 825020390-477./003..43.846:003../0..06:0...03:3.790/0./4/0.7*5..O/4  !4/0248..089.O24/-:.770.4-903070 4-094/0.9.7.8003..8070/03897:.3.03943/4 434..7.8/0% 31:9:748.O380.:9.92 .547 20/4/00..43080.039443.7.7E3:3...54//403903/07.3.05.79J.:4.43086:0/-:.:48.. .5.43089...90723.3/4..O3.8070/070.4.79J.4/0.2485.3.20390024/4 /0/-:..9E3:4803:30020394.8/0%   -f ° ° ½  f¯ °¾f¾ff ¾°°¾½fnf°f¾  –°¾ hn¯½f  n° ¾  © ¯½  300./47348454790097.

.43003:.80.7.:84./4 3:3.425.08/.3.08/0.2...8..0/05747.30....O3.2486:00308.47/.425:0/0803..                              ../08..8..//097.35747.8 ":E842E8.759 507470.77440- ./45./470883050703..2.7596:0089E33.-.9548/01472.4397.774.7 ..86:034.3:.0/0507843..7 :3.8070/02.

:74 !474.447 :04 .430803:0..44780..06:080 .0020394.2482.3E88/0/48.2-.      484974854/70248007.7003.:397.248.3:089748/80N48:9.420470086:02./4...3..70.447 /097.43497489548/0.. ...57O2./00020394.03030 0020394.97-:9489740$901:3..078O4:397.43342-70-:0 447.:345.24854/0248007.0374448...70.-0.7089.       43#547.43..4380:702486:0.8 47.2.447/097.5.:E08843..2.7.4308  O O O O O 447.4306:0807003./4    89.70:3946:0507843.70.47.43#03-.3.1.7.248:35.3803.84 08905..7..7.8349.5703/07....7.7E5./4.3.3:.2348 47.43.06:080700300.:74  ..79J.70.807E/0080.4470803.089:/.7E35.9 .4470803# .447.9..42480/013003%11  447.-.43947344/-:.039.5703/03/4.3.3..84  .7..3/4/-:.8 97-:9481$905.447  97. /-:./.7E.57O2.4389740$90 47.03.770.8J.9E3:48 54/024800703970/-:.43085./48 424.447/070034....42047..2.7.7.83..83..480/-:.6:0481472..2-.44708034800203948..0702486:0089408.9E3:4 :4974954/0.O240850..803.248 84.703.3.     447# .248.39074720390 ./0.97.7.035...79J./08 5074/02420394.7.43...7E4974.447/097.7.8548-/../01370. ...:46:0348 807../.6:01$90 5074./480.4.97-:948/0.7:354.7E5.447034800203948.-../4..447/097....439094/0.447/07003489740$905..:48..86:087..07/./0.9 89740$90    4308.9E3:48.7:3.07.708..5708039..6:02E8348...83.7.44780.:897.03.7..48/-:486:080.3.7..0702486:008903/48.80/0.748700348/0.7.089.8/0%.43085./4  .06:08070030/0.:.47.43.86:0.7/01:3.8548-/.9E3:48: 49748..43#0../4/070..-03 .3.. .43.42403$$ 7-.J30..43..0.3/.2348  .97-:94/0.7:354..7.70.447/097.4.439094 /0.307.3./0137.54/0248.9 1$90   $:54303/46:0903024804-094.700203948  .447/0700340.3/4.:4 /0.0..248.390747J30.5703/07.3$$34903/7E3574-02.4476:054/0248/0137. 282.8  !.424./097.085./-:4/070..7/0002548 807.8.434.447.2.447/070034089./6:0807.70..9.9488430.248.78O48:.089.7..3.447 30.8 .57O2.07.:.0480:9.8/0%..J30.8033:08974.97-:9480803.3.4389740$90 .97.439094/0:3./0/-:.7./4  ..24/1.2-..385./086:0486:0 .4346:0 .04 .. .3/46:00./0.248 ..7....203904828248 !47 00254 54/70248:9.4708/893948 /0.4476:080:9.0.86:0...431$90 890:3.390747.7..234 5./085.0/.4.3.47.497.8349.3/4:354.447 05.770.89030248.4/0..

.3/4/0../..:.7/01:3.943..48.7.0./480...9:7../7.1:3.43080.0..57207.O3  .9      < < < 424805:0/0..70.8.70.248/-:.24897.O35.70.O3  $4/080.8/0137.0..O36:08003..6:0 0850.7094.907./-:..2-.0.390880./7.7././-:.43 .9E3:4..  '0.48.80:3/..2..7:3.0..702483:0897.4470.39086:03. 6:080..4470.390.4380:7:3.7.32.7E/03.47.8.7497.24897./. ..7.7..57207.9 < 1:3../948/0.9474  709:737..248.1./.94748  147      147      .O24.43085.:..3.702486:0 .78039 310747  .O3507O/.:..9 7. 5:0/0807390708./02E8.0.4346:0 0307.9474     ./7..3908/0.70.:.0.3. 3...9..:3.O3804-9030:3..248../948.:.:.0.0.7.506:0N.1:3.0. 00.43.94748 . 34887.:35.7.05.0/0002545.248.02545.:3007../7.7.432:. .7..:3../948.943.3/.5.54.447/070034 3 .94748 1:3.0:332074..07000254032.1:3./0.03.O3.447 .447/070034 '0.1:3.947403..4393:.3./088:50747 310747 .0.7.07 9030248:3-:.447  1:3.9  709:735.44708..7.3/4  47.439094 1$90.3.433:0.2-.48389.57207.248.9 1447 .:370..8 7003.32.54./4 6:070.O3:9..:0.0.7.884-7006:0089.9474:0480539.3/42  3:2!48-/.70.9474     < 47.0.8.94748.9474  .94748 5.0.44708.447.9.3..0307./03.-.439094/0.70.9.70034/0:3./08 .7..0.9474     .348 4170.248.7003..46:034887.439094 1#0.9474 310747 8:50747  3:2!48-/.447 ..943.439094 6:0080..439094/0.0307../480.-04-.759 .9474.8 ..07./7...7..0.

.

7.439094  3/4 434...7.943  ..7 ...439094833./1:3.-04-..

.

.3.#0.8 2..8  1 .7.3.439094..439094.-24800020394...3.439094  ..8 .

.

/7...:. ./480.1:3.439094    < < .O3507O/.439094 /0134.94748 .$90340. 8093907.

.248:3.4.78O4097.447/097.5E3./4 03:.4000254./4 02480..O3 ../7...9E3:48.3.1:3.3/4 807E3:354./480./7.790  02545.3.%4/40894:394./7.07.94748  1:3.39074708.7.:.5.420347  .94748/893948.9474  ...9E3:48/0./-:48..54.06:0.5.2-48..54/0248./. 280:3/48 46:00307.0.:497...490254  47.O3805:0/0.080.447/070034 /02E8 4870.1:3./4089..4370850../-:.2-..7/0.43:3..7.O3030./480.790                  .248/-:./4 !478:5:0894 03.447/097.9      < < < 00254.94748 .438.2-..84/0-:.32.943.94748  147      147      ..8 5:08803.439094 89740$90.03:3.447 .4470..:.07000254032.70.390747.7/07003.O36:09030.439094 89740#0.2-......84 03:..1:3.748 70.O3 3089080:3/4.24/1..94...0703:3.5.7E0 .:.3/4089.00254.5E3./480./../.248.

I f¯¾n¯ ff  ©¾ °°nf°f¾n°f¾€°n° ¾½ffnf¯°¾  ½ ¯ ° fn fn°  ¾nf¾¯h¾n¯½ ©f¾  .

f°f¾ ¾° ¾  ¯ °¾¯h¾° ¾¾ @.  fn¯ °f¯¾f ½nf ° fn  ° nn°f.

.234:04539../..0845.:4  :3.8.70248/:7.2348 .7.75./013/.0250.:4..81:3.81:3.42502039.078.J30.44794/40 E70.6:06:0/.307.79J.86:06:0 :9.43086:03485:0/03807.447/03974 4825020390 /-:.f°f¾ °f°  ¾fn¾¯¾ © ¯½¾¾    ¾¾  ©¾ °°  ¯ °nf°f¾ n¯ ¾ nh°–¾ ff¯¾fn°°ff½ °  ° n¯  ©f ¾nf¾  ¾f¾½¯  ¾nf¯°¾  3.O3-03!.:3.3:08974.3944 6:080 903036:0:9.808903/..8.9  ¾f€°n°¾ ½ff n fn°  nf°f¾ f¯¾f ¯½ ff  ©f°nf¯° - ° °°–° ½fh¯ ½¾¾f°fn °°–°ffnn°¾   ° nf°f¾ D°f °nf ff€°n°½  ¯¾ ¯½ f f  ©f nf¯°f³f  ° ¾ –¯ °¾½ffn¯½ fn°f¾ €  ° ¾€°n° ¾ nf¯°¾  -f f¾€°n° ¾ –°9f%%¾– ° ¾ ° f f ¾°¯x ¾  ©  n°  nf°f¾ ¾  ©   ¯f° °  n°  nf°f¾ ° ¯¾  f °¾¾½¯  ff¾n½ f½f   ¯ ° nf°f¾ °  ¾ ¯¾  ©f .7..54794/4808485:3948 30890..7/02.547:3.234  '0.7.7J. 574.3.6:05.79J.07..7/0./-:.78:09.070248.O247003.:34/0485:3948547486:05.7.8/0.54789:.7:3708:203/0..390057080390.2485.78003:35:394/0034 :04 /0137.4308/8543-085.3:08974.8.8.7.7/0.

...-0.234  :3.8 44-89.07.¯f f©f f  n°  °nf°f¾€ f ½nf  ° fn © ¯½   ©n° 9 nf°f¾  $03..857:0-.4.J30.0%4   ½ff¯  ½° ¯f–°f ° n¯ °f ¯¾ffn  nf¯° ¾f€°n°°  ©f°f f °¾  ½ °¾½ ¯  €° ½¯ ½° °nf¯° f¯f ¾f€°n° ¾n¯¾ f°h¾ ¯¾ h½   °f¾f h¾ ¯¾ ¾°½°f ff½¾n°  #0.48..71:3.3908/0./0.20390.94..2483.3.4245.7:3.:039.8 54/7J.447/03.248 03903/46:003./-:4 !./.4203/...O3/03:089745:39074/0/-:4  30%4 34/-:.8..7.07348   #0.-07.4770.4308/0..08028246:083443./4:3.:E080 5:394/43/0/080.3.O. 8346:080903/7E03.9.47/.8:50747 6:07/.O324.234.548.7.23483:9.803./..4245..7E20974485:39480/43/0.57207.7.:9.7.89./-:.8/0.234803..8 .54/0248.-0./024.39074720390 $34803/.4.8.24824.248 90723.O330%4  ¾f€°n°½nf ¾   © °f° f nf  ¾ f½¾n°fnf ½°    © f¾f ½° % % ¾ °  n¯½fh¯  ¯x ° @%% ½f° ¾n¯¾½¾hf¯¾ h½¾    ° ° f½¾n°fnfff¾h¾ ¯¾   ©f° °f° f nf f¾f ½° ° ¾  €°f°nf ¯x   .7E20974 ...548.O3.8././4743.870.43:324..-073/.4203.447/03.390 /0-080770.76:0000/0..2039003.  :3.0%4 4/43/0...74.4.0250.078005:390745.3908:3./.J30.0./4570...54734849748 ..3908-03!.33:3.086:3.8./.808.9 5:08946:00 010.9:.7:3..

234803.248.4 .9.077.0%4  :3.2039002F94/4.234 02F94/41 4../-:.705J.79J.248 8340.70.7E54734849748 507454/7J.307..9 405.7..O31  ¾ ¯x  n°  nf°f¾¾ ½ff  °f n h fnn°¾nf½°nf¯° 9ff  °f  n°nf¯°  nf¯° ° f  ¾fn f  ½ ¾° ¾h f¯hnf¯ ° ¾ n fhn°°f ° f nff¾f ½¯ ½° nf¯°  ¾ n  ° n¯ °f¯¾f  ©f ° ¯ f– ¾ f° ¾ ¾°¾¾ –¯ °¾ nf¯°°¾ ©f¯¾f–°¾ –¯ °f   °¾ ½°fh°f f  424/0..9 5. 24.:48  0254/0.43.248 :9..480!.0390.2.70 /-:4 43480. 83480/4/O3/00250.548.70248031:9:748 .5.79.J ....39074720390 30%4 807E06:.480!.4/0497.234.077.7./433349748020394030.07434849748 .384405:39074/0/-:4.

234  .70.43-03!.077.73.70248/0..0%4 5.4470.9 1  424805:0/0.0.9 30%4    .°f¾€°n° ¾¾f¾f¾f ¯¯ °f½ ¯¾fn °f¾½¯ f¾½ f¾ nf¯°¾ °nf°f¾ f f¯¾ n¯½ f¯¾ ff°¯  ° nf°f¾   ° n  .2343480.234 n°°fn°½ ¯¾ °n°f n –n¯½   ¾  © ¯½ n°¾nn° °nf¯°n°   ¯ °.3.7.9 -03!.0%4    .4203.8 5.0248:324.9 :04./4.7.9  ....07 3.-.7 !4746:01 4.3/4.4346:07003..9 24.-J./...7.078485:3948/0.J30.7806:00..425094/000254/0.9 30%4    .077..2480/-:4  -f 9ff © nf ¾f¾° f¾ n –° n ¾f ¯¾°f°¾f°nf  © n°  nf°f¾ ½ff°nf  ¾¾¯x ¾¾  x  ©  nf°f¾ ° ¯¾ °fff   n  ° n –  © ¯½ °  n –n¯½   © nn½  ¯¾ f€°n° ¾ ½ ff½ff  °  n°   O/4.7E54734849748..234.234 !489074720390/-:.9 30%4    .4.43:3.248:3. 572075:394/43/0.. ..2F94/41 ..248.3/.8..4203.8J30...70 5:394/43/0.

3.8./ 990.f°f¾ @.  92 0..2348.

990 8.759 .

.

O35..3..8  1 0020394 0020394 0943909  .943.434..7.:2039 0902039/ /..../.3.4390940020394 0943909 /  .7.70020394/4....8 1:3..8 /.8  .7.7..1:3..3.439094/0:3..439094.70.3.

/1:3.439094  709:73.1 .439094 < < 709:73$ <  3/4 434.943  .

.

-24800020394...7.9 30%4    .8 .9  ..7.8 2..439094.9 30%4    .9.#0.9 24.3..9 30%4    .8  1 .0%4    .9  .9 1  < < .9 -03!.3.3...

759 .8.

.3...08908./476:0..3..0/0.8/9 09  .3.0590.8/0% .8/2.0.759.0...43:33../  -4/ ..

...3.8 .

-4/ .

.790               .5E3..92 !..7.7.5.7 54/0248..-..03:3.07000254032.

 –°  © ¯½¾  ¾nf¯°¾ °   ¯ °nf°f¾  °   ¯¾f¾€°n° ¾ n¾ 9f%%¾ %%    ¯ °nf°f¾ ¾° ° ° ½ ¯¾  ©f  nf¯ ° n°€°n° ¾ff¾n½   ° f f½nfn° ¾°€°f¾ °  ¾f  ¾ ¾f¯¾ ½nf° fn nf  ¾   ¯ ° ° .f°f .

 ° ½ ¾ ° fnf¯¾f¾ –f f°    ©nf¯°¾  °  ¾° f¾€°n° ¾  9 .f°f¾ @.

f°f¾ .

° ° ° ¾f° ¾ ³ff   ¯f¾  nf¯°¾ °nf°f¾ ¯½ f¯¾f ½nf ° .

f¯°¾ °.

.3..70..7...424 .077.8.20390  :3..8 8432F94/48/04-094.430890803.23489740 5.8/481:3.7.23470.439094/0...070248/483:0..43.390:3..1:3.J30./-:4/0..759 9.797/00020394.9   ½ffn f°nf¯°  ° f¾½°°nf   ©  n ¯¾  nf¯° ° °½°°nf °  °¾¾f¯¾½ffn¯ °f   © n°¯ @%%  –f¯¾  ©f° ¾ –¯ °¾ ° nf¯°½ ¯  ° f¾ °¾ f°f¾½°¾  ° 9 ¾n¾ 9f%%¾ fn¯  ©f°f° f nf ¾   ½° ° ¾ ff f  nf¯°f½°°nf °  ¯½ f¯¾fn°¾ ¯x n¾ 9f%%°  n °°–°½fh¯   :3.4308  .8/09.6:07497.7:3.83:0.47708543/039081:3..70../420/.7.:.7./-:.81:3...8.4308/0.480!.:4. .79J.2348.43085.O3/0/-:4030034/0.3.3:.8  6:080/0-04-90307.390747203900308902. '070248089..f°f¾ @.  3057080390.3./.5.480!.9  5.O3.81:3.248.2348 6:0843..390854/024805.O3/0.8..O389740  .43:3 00254 5074...424..

9 30%4     <080 .9 .9 -03!.9 89740  n°°fn°f¯¾f ff © ¯½   ©n° 9 nf°f¾f° €°n° ¾½fff ffn° nf¯°¾ 9n¯½nf°½n f¯¾f ff nf¯°n°° n  °   °nf f fn°  ©f ¯¾°¾ –¯ ° nf¯°  ¾f  f¯¾f  °  ¾°f ¾½ n  ½ € °f ¾nf f  .° ¯x ¾ %%½ ¯¾  ©f°f° f½   n  nf¯° ff¯¾n f ½¯  ¾¾ ¾°¾¾ –¯ °¾ ¾¾¯ff¯x €%%  ½nf  ° fnf°  n°f €  °nf €%%   °f f n¾ %%f°¾  ©ff¾ f  ¯h¾  ° nf¾ €%%¾ ° n ¾f f °  nf¯° n f  ½ ¾ n f ff¯hnf¯ ° ¾°f f¯¾ n¾ %% f¯ ° ½  ¾f ¾n°°f f ½ ¾ ¾ ¾°f° f ¾   ©f°°h f  0254/0.480!..9 30%4    .9  .234.9  .9 30%4     < < .9 89740  .9 24.0%4    147     1    .43.480!.

248.2480.4393:.42406:08:0 .6:080/-:0:3..J30.07403:3.J30.790  0254/0J30.92.3/454794/4848802039486:0.4330%4 /085:F8:3.4/0.05:394/03..-.9  ...234.480!.0%4   34889:.0%4     < < .9 :04.4324.8  .248:3-:.4393:.4203.70.7E./.J30.8.078..89./ 990.-f 9¯ nf f   °  ½ff © nf ¾ n –° n ¾f¯¾°fff    ¯¾f¯f  n  n° °  n°  nf°f¾   ¾¾    °nf ¯¾¾ ¾°¾¯x ¾½ff  ©f °  nf°f¾  308./8.234 6:0.5.248.42509..8:09..0%4    147     1    .7.O370.2348.4203.9 89740  0254./4  8900025454/0248.425094/0/-:4/0J30./4./.3907474024870.7.O/4...8...3. 13.02486:080/-:0 :3. f ¯¾ ¾ f   © ¯½f°  °¯fnff  ¯¾¾  ° f f f ¾ © ¯½¾ nf°f¾  ¾ –°  ¾–f  ½¯  nf¾–f n°f°nf €  °nf  nf¯°° ¾hn f  ¾h€¯f  ½°f° f ¾n°°f ¾¾ ½ fn ½ € nf¯ ° n°¾ %% ½ ¾½ff½°f° f¾° ¾° n ¾f  n  °n¯½ f¯ °  nf¯°  /-:4.2480305:394/43/0 /080./-:.43:3.30.8.9 24.7/..078.4389740.077....5.9 30%4     <080 .8 9ff ¾¾°  ¾f ¾ nnf¯¾fn°°fn° n –n¯½   ¾  © ¯½  92 0.03/4:3..43.803 /.9 -03!.5E3.9 5.01475.43-03!.8J30.70/-:4 ..8. 4389740 .3.447/03.234/-:.759.234803.9 24.

759 .990 8.

.

8.-0:3/0391..7.8 .#0...3.0...3../47/00020394.

.

8  1 0020394 0020394 0943909  .8 /.439094/0..0...439094 < < 709:731.:0.7..7..54//4.4390940020394 0943909 /  1 .439094.3.8  ..84$834.439094  709:73..:2039 0902039/ /.4380:80 1:3.00.3.80 .3.70020394/4.943.3..

<  3/4 434./1:3.943  .

.

.9  ..9 30%4     < < .9  .8  1 .-24800020394.480!.9 .#0...9 89740  <   ..7.7.9 24..3.439094.8 2.9  .9 30%4     <080 .9 30%4    .8 .0%4    147     1    ..3.9.3.9 -03!.

.

3..439094.0%4     < < .3.497400254-.8  1 ./40302824.9 24.9 24.9  .9 30%4     <080 ..8.O/4 ..9 -03!.7.9  .0%4    147     1    .9 89740  < <  ...7.8 2.9.

8.759 .

8/2..9:-74807 ! #' # .3..8/9 09  #0.3..0.../ -4/  ..

...3.8/9 09  ! #' # #0..3..9:3.8 -7 -7 .3./47 ..8/2....0..

.8  ..3..

-4/ .

.92 !4/0248.:3..5E3.43.0/07.43000254031:3.20394  ..

.

n°  ¾f¾ff° ¾ n f ¾°n f  n°¾°  ° n  .h¾°¾ ¾ ¯¾½° ° °½n ½ ¾n°¾nf¯°¾ °.¯  ©f°nf¯° °nf°f¾ @.

f°f¾ ½  ¾   ¯f ¾ ¾€n ° ¯ ° ¯½f° n¯½ff½ nff¾fn¾ .

6:0.070248.7.07..8O3... /0/..447  3057080390.8 507843..O24..:4.¯¾½½¾ n ¾  ¾fJ n¯ n ° °°nf ¾h ¯h¾½° f¾ © ¯½¾ f °°½n¯h¾ff¾¯f¾n°n¯ °¾ ° f ¾ ° ¾¯f°f ¾  3.248...3908 5...4.8J..7348.234803.2348 .748/0.234 6:008:382500E434 5074..702824.7.8/0%089.05.234.3908/0:3.7     .3.43.4247003.1472.88:03908.248.743448.43/8939.:48.79J./-:.077.8.85:0/../00E43470:.3.8/10703.39074708.803970..07.7.79J.

f¯°  ° nn° n   nf¯°° ½n  .

f¯°  ° nn° n   nf¯° ½n½¯  n¾ 9f%%  .

f¯°¾°  ° n ¾f° f ¾°n   nf¯° .

02F94/41 /0...447:3.439094/0.7/0.89.:942E9.74 .077005J... .447.7E54734849748  .7.f¯°¾°  ° n ¾f° f f¾ fn°n   nf¯° ½n    f¯ °  ¾°¯¾¯ © nnn°ff¾ff° ¾  ¾½ f¯¾½ f f°¾f–°f½¾ff n°f¾     © °   ¯ °nf°f¾ @.7003.8 6:0..1:3.248.3908/07003.077.4.94 ¾ ½¯  © ¯½   © °°nf°f¾n fh°nf¯°n°€¯f  nh°–  ° h°  °  n ° ¾ nf¾  nf¯°° ¾hn f  ½   ¯¾  f°½n–f ° ¾ nf¾  !.O34.077..234:9.. 9 ¯¾ °f¯f– °n°¾nf © ¯½¾ nf¯°¾  f ¯¾fn°°fn°    .9 1 089..7 /0.0770.3.2347003483.2.234 0089..7.:36:03480.3.4/0.234 ..42509.0:3./40.307.

.

447 .3.8 .4.0.9 24..9.9 30%4    ..0%4    .3.0770/0.:942E9..431 .9  ..9 30%4    .9 30%4    .7.7.9 -03!.439094.234.8  1 .9  ..9 30%4    ..9 1  < .9 30%4    .43470034/0.

077005J.8  ./1$90/04-094.2-./473...70.7.439094/0. .7:354.447/070034/0 0E434 54720/4/0.390 5..43.42E8000254 0248459.94 ° ¾f¾ –° fff°  nf¯°  h–° ° ¯¾°nf¯° ¾ ¯¾n f  ½nf¯ ° n°  ¯x n¾ 9f%% ° ¯ f– n¯€%%f¾  °nf–f f n f nf¯°½°¾¾f¯hnf¯ ° ° ¾  €  °nf °  ¾ nf¯° f°  ¾ n ½ff nf¾ nf¯°¾n°n   °  ¾° €  °  ¾ nf¯° ¾h°n f  ½ ¾¾ n fhf¯hnf¯ ° ½ff½   °f¾  n  44-89.23470034.57450/./4547..3.

.

424 4.:8.070248 0.9 1$90   .7/0:8..439094.20390:./0..0.6:05...39074708 .9.7.4370034/0.048.234.9.43..0770 f ¯ ¯¾¾nf¯°¾ ff ¾¾n°°f° f ¾°  °f n  f¯¾ ° fn f°  I ° h  °½ff f¾ €  °nf¾ ° ¾nf¯°¾  ° ° n   °  424...9 -03!.9  ..94.077.447  /02E8 54/702484-807.9 30%4    .8 .9 30%4    ..:77J.234080.43.23405J..../-:.78O4.9 30%4    .2348.431 8346:0806:0/.234837003483.3.3...9 30%4    . J30.8  1 ./4 .3.7.480!./10703..8 03:.9 1  <  ..0%4    .4394734/0..0770/0.23480:9.-0794  .424..9 ..702F94/489740 3480.439094/0.4347003.7.9 30%4    .7 1 6:0.9 24.:942E9.480!.9  .203900.02F94/489740 /04-094.7.6:048..9 .9  .

.

9 30%4    .0770 .3. 83..234 .9  .9 30%4    .9  .8 .0%4    .4348O4J30.439094.9 89740  <  .8  1 .0770/0.2348370034...43..9 24.9 30%4    ..9 -03!.9 30%4    .9 30%4    ..7.3.7.0.9.

4./89740$90/04-094./0./7.3.4394734 6:080.9 5.57450/.480!..43.N.0248:3.8  ..9fffnf fn° ¾¾ © ¯½¾   ©  h–°¾ °°nf°f¾f¯¾f¯¾fn¯ ff°nf¯°¾ n°f° f   n¯ f°  ½ n° n   nf¯° ¾ n°¾– n°n¾ 9f%%  .43.3908/0...438:003089.2340802824 5074..7.439094/0 .447/893945.70..7.89740 5.7..234 !.J30.2./-:. .077.8O3.7.. .7.. J30./4:3.234 0248:9../..7.33907F8.

.

.8948030890 .9 30%4    .9 .234  $4/080..8.9  ..07:3.43..8/0% .5E3.9  ./0.234.3908..480!..79J.974002548/0.89.57E.8 5:0/08.9 89740  < ../43/0802:0897.797/048 282485:3948/0.7.9 24.3.4348O4J30.9 -03!.9. .9 30%4    .9  .:.43/8939.5.6:J0.9 30%4    .9 30%4    .0770/0.0%4    .8 .7..:4                .8  1 .9 30%4    .3.9.9 89740$90   .0...7..234803.2348.439094.9  .480!.3..348.089..

f°f n¯½° ° .° ¾ fn  ¯¾f¾½ f¾   © nf¯°¾ °¾nf°f¾  f– .

7908 /8939.07..748..7:354./00890 ..9  .3/405:39074/0/-:4507483539.2348 /02E8 54/0248./.-7749748.2349.439094..9.42E8. .3.7/48.03/4.44708/893948...7.43:32824./02E8 ./.7.7.248.2481..43.2-F354/0248539./0...2348/893948 ¾ ½¯  © ¯½ ° f ¾– ° n –  .8.8/0034 97.703/485..9.3/4 ..2348 .748...-77.80:757.:4086:034854/..3.076:0.8  1 .f°f¾ @.248.8 2. ¯¾¾f¾ © ¯½¾   © nf¯°¾   ¯¾¾ – ¾nf½¾f°  ¾  ¾ ¯f°ff f¯¾f n– °½n ½hnnff  ©f ° f¾ ¾– °°nf¯°   ° n¾°  ° n  ¾ f½ f¯¾½f¾fff–° ¯f ¯h¾f f°f  ½  ° ¯¾ ff ° ° °½f  © ¯½¾n°nf¯°¾ ½ °¾ °  ¾f° ¾ ½fffnf f  ° ° n¯¾ n f°  305708039000254089.7  !720700254 539.57E.2348 46:0348..:34/048.077..79J./0.8.234803:32824.7003.03/7E-035.9..4.7/0 .3.2.7....

.

9 24.57207.9 30%4    .0%4    .9  .9 30%4    .9 30%4    ..9 -03!.9 30%4    .9 30%4    .234 .9 30%4    .

.

43.480!..3908/0:31  ..9 45.9 1   .9 .

.

704:380:3/4.9 -03!..9 ..234 .

.

7089.7.8.9  .9 30%4    .7.480!..0%4    .0746:05..9 30%4    .J30. .42039.9 1$90 11  .5.9 1  < -f n  ¾  ¾ n – ¾h°n¯½  ½ ¾ €fff€°n°nf–f.9 24.9 .574-.

° .

1 80.7.24870./4030...424805:0/0.070300254 .7.0248:3 24.234.2.431 08902F94/4706:070 6:00.4203.9 .9 0845...J30. 2F94/4.077..43.20390  .234089F.8  :0480.9..4203. 5:0808948/48./4 !47084 80.70.f°f¾%% f¾ f ½nf f° ¯ °  ° fn° °   ° nf°f¾  3080.447/03.234089E 805.480!.9...480!.077O05J.2480.9 5.025J..2.2348/89394884-70:32824.9 3.2343480.3/4/48.9..43.705:39074/0/-:403./.8 57207./08/009245:394 ..234 !074.7.O/4/080:3/448/48.. .70..2348807003.8/080.43.../.43:3-03!..44..077.234 .8.0%4 5./.3/0..O/4089.3.43:3.89./.00.447..05:394/08/0/43/0.3....480!./.42509E3/44.20390.

9 -03!.:36:080.390080.439094.9 30%4    ..94/4097.9 30%4    .390708.8  1 ..9 .0  $0:3/400254 :3.708/893948 ¾ –°  © ¯½ °¾ f½  ¾¯½f n f½¯  n°f €  °nf fff¯¾f  ©f f¾ fn°°  °    °f¾ n  ¯h¾  ° ¾ ¾ –°  © ¯½¾ ° ¯¾°nf¯° °    ¾ f ff° ¾ ¾ ¾½ fn ¯¾¾° –°9f%%f° n  ¯¾ nf¯°n° n¾ 9f%% –f–f¯¾°¯ @%%½fff¾f f ½°    ©  ° f f ¾ ° ¯¾°nf¯°  8547046:0 0..9 30%4    .....57450/..8 2.3.57450/.O/4  .97.9   .3.8 03.447.9.03089003.2346:0539.234.7.07032. .03020/4/0.7.2-4/0.9 30%4    .0%4    ..9  .480!../89740$90 .024803080:3/4./1$90/0 4-094.../4 5:080802824.9 24.9 1$90 11  5720700254805:0/0.43.9 30%4    ...2-4/0.48.4476:0..7.03/48:.3.9 30%4    ..234  ...J30..43.10.9  .9.

.

0...9 89740$90 11   .2-.5.2-40..447/0.4 .447.J30.7.94/4097.

.

702483:0..0.9.2:..7.94.8 9F..790  0248/0.48 /02E8 .8.3 308:0390.079.5.840302824.9 30%4    .48.9.8348O4J30.8.424.5E3.0%4    .46:0..85.9  .234 50742:0..75.O248070.0700254857E..480!. 50743:3.86:0 2070.805:0/0.:405.9.89.9 24..4370850.......7.7.03903/07-03.248 70.3.503.405:39074/0/-:4 .79J.8.3.089E/02E8...47.3:.-J.0...9 89740  < 80:3/400254032.3:3.870..      .9 .9.:7./40302.57./2976:008948/4800254834831.07J30.2-F303:3..74...9 30%4    .

0702482E8.902E9..4302F94/4.:7.424 089.850729097082F94/48/05.7.07 .424!4948454:897.:34/00894897089548/0.307..8-707J.7.:48.6:08.0/003:.7030..8.4380:248.:.8  :7.425703/07.:7.2.4 :35:394/013:3907..4803 ..70.3..8070/05.8 E8.:9. 8:3.:3 54.7..7.2.48..07086:3..803.:7.76:05038.3.7E.8089E35038.7.8/0/80N4.8./7E9.7E2097486:0...8.0/05747../4.497..434.7 ..:7.424./.43082.//0.43/09.54.82.7.902E9..0.6:0:3.8  44-89.80:3/.6:09030248:35:394/03./003903/076:0348 807.:7..947 46:054/7E.-07:354...390.870/43/0.7.:7.8480203948/0...3.2E8849:7.8.8.830.7.7.248/80N.08431472.:7.¾nf¯°¾ °¾  ¯ °¾nf°f¾ @....803 5747.070248497.  .82502039.85.7.43085...E.7E./-:.. 03. -.42E8.7E5.03/4.708948 902./0.76:00/-:403.8.-7J.780.0794/.48.8..1./086:05.O3/02E0308 6:054/024825479.79J..2.8089.4903/7J.9745:3948 5:394/03.3.48..48 4 ..8 ./4.797/0..48           .0..:7.8/0/8939489548 7.8 8:3.:7.:7.7../48.390 3454/0248/0.434.438:8002548  !4/0248.57207..:7..48 7E1.:7.3/4.:7.4203.7:3.424./...43.07..8007 8:3..4 0/013 /485:39486:03/./-:4030.8/084.0797./003903/07 5074548-020390.6:075747.0702486:0081E.390  :7.7.2486:094/.7.3.48..59.307./...03.8/01:3..8 .½ ° ° nf¾  n°¾ –¯¾ ½¯  ¾fn¾ f¾nf¾nf hnf¾f¾nf¾    f¾fff ° ¯f°f nf°f¾ @.8.4250.4.7E3.3/4:3.29.6:F5.9.81O72:.. 89..24805072039.05708.5.8 2.79080.79J89..2.3./00850.:89.54/07.J30.2.8 46:080.:.434./005708.808:3574.8..:/.0 /-:49F..J30.430890954/0.54720/4/0..5..902E9.48 485072903/-:.:../...6:0.07 5:3946:03/.:310703.7:354..6:0..902E9.07/.750.424!494845  3488:03908..81O72:.307.7.7./48031:3.7./....039..7./0.8030034/0.:310703.2..8 03970497. ¯¾f½ °  ffn nf¯°¾n°° f¾ nf¾ f¾ f¯¾f ff°f°½n¯h¾ °f¯f ff½ °  ° f  ©fnf¯°¾n°nf¾  3573.7.4/02.85.3:0897./08 ..82:./O3/080..7:3.4 5470846:E8:32..08/.:485.85.902E9.7..7989.8.070248.O3 346:0/.

.

¯  ©ffn¾ ½fffn nf¾ f¾f f¾ °nn°€  °nf¾¾ –¯ °¾  f¾  °  ° ¾  ¯ °¾.

  ° ¾ fn ½nf ¯¾n¯fn nf¯°¾n°fn¾ ¾fn¾¾°¾ –¯ °¾ nn°€  °nf¾ °f nn°€  °nf ° f  ° nf¾ °fnn¯½  °° ¾¯ ¾ fn nf¾ °   ¯ °.f°f¾ @.

.8 8902F94/4706:070:348..740850..07:3.-07804.8 /0.46:080/080.-.3.75./4/05074/4/00380N...4...:.7.39485.7.8 1O72:.7.2039486:05:0/03.097..408.7..902E9..f°f f f©n°.434.7.54/073.907J89.f°f¾ @.  -f –f ¾nf¯°¾ °f n f ¾ ½ ¯¾ n ¾  ¯¾  °f¾ n ¯ f°  ¯x  €%%  °  ©f¾f¯ °  n°° n° ¯x ¾ %% @ f¾ ¾f¾n¾f¾¾  nf¯°¾ ¯h¾¾  ½ °f½ °  ° . 6:03.8 8J6:0903/702486:0701708.20/..24884-7004-0940.5476:0.3.07..8.82./094/497.1.85..7.7.074.0794086:034708:9.  2F94/46:054/0248/-:./.:3.4.:310703.7.439094/0 ..434.7.7.4.6:0.7E2097485...:348 .43.

7E2097486:0/0-024803.4 .74*/0*704  ¾½fh¯ ¾ n ¾½° °n°f¾n °f f¾ n ° fn  ½fh¯ f  ¾ °¯  ½  ¾  °  fnn¯f   9¾½f f°–%°nf°–%€°f¾°¾h°–¾ ° n¯ °ffnf f f  ¾h°¯f ¾ n¯¾  ©  f°f ¾  h°–n   O  ° %n°f% % © ¾°½fh¯   f°  °  ¾–°€nf  ff ¾ °h°– °nf €° ° ¾ ° n°f f¾f–©f¾  © f¾ ° nf  ¾ nf¯° ¾ °  nn° n°ff  O O O  f  f  ¾  ¾¾½fh¯ ¾¾° f¾f° ¾ °n¾  ° °  ½  h°– °n€°°¾ ° nf° °–f ¾ n¯½ f¯¾¾½°  ¾° °f f° ¾ 9ff  °¾ fn  ¾ ½ fn °½f¾ –f ¾ ff f° ¾f °  ° ff¾– ° €¯f  #..7.3:4*13./.2F94/4.7.f°f¾  8948843485. 8039/4*./4 .4397.   7.  .30832074*! 7.7./48.3:4*3.

/.30854/7J.O/4.8.7..759 .248:9.9 !../0.38 .7./.  !.8:0390J30./48037.07977...43.77.

f  ° ¯¾fnn ¾f ¾f n°¾f° f¾n¯  ¾f¾€°n° ¾¯f ¯hnf¾ I f¾°f¾¾  fnf¾ .f 9 ¾ €f¯¾°¯ 9% % °ff¾n½ f½f fnf¾ ./.f  3903/07487.308 9ffn¯½ ° ¾–f f° ¾ °f¯f° f¯h¾¾f f¾n¯f €  °nf¾    © O  ¾ f°¾n  –f ¾ ¾ ½  f¾– ° ¯f– °  . /07008 -f .

.80  424805:0/0..2.4708/07.43.03.748.9 !  1.03!  0254/0/-:4/0..3.8 ..7..2348.       .48 9ff ¾ ½ f ° °  ¯x n°  ¾ n f°nf¯°¾n¯½ ©¾f f¾  fn¾ °   ¯ ° .0250.7.308 O O O O O f f° ¾¾ f°n –f ¾ ¾ ½°¯fnf ½9  °  ©  f¾Off  nf n ° f nn°€  °nf   9f f° ¾¾ f°–f ¾ ½°  ©  f¾f f© n °  9f f° ¾ ¾¯ fnn°€  °nf –f ¾   9f f° ¾¾ f  f ° f–f ¾ 9f f° ¾¾°¾–f ¾ fnn°€  °nfn¯½ fn ¾½° fn° ¯¾¯½° ¾ n –f ¾  ¾½ ¾ ½fffn °nnn¯½ n°n ° °% % ½  ¾ f  ½ f¯¾f°n – n¯ ¾  .3907479030248../.07 .03 ! .7.439094.:310703. 3.074 90723.

/....7.234807003.70.438:0.07080/80N4  ..03805:0/0..43.07/0 :3.:354.4473074080:3/4. 3...:3./.035.f°f¾ f¯¾f½ ¾ °f ¾– °  © ¯½  °  n f ¯¾ ¾ ¾ °n ¾ ³   370.1:7./0.2348 57207 .4473.3.23486:0.43.4250.48.4.43/48.2E8.8:03902.7.307.-7J..:36:05.07 80..2.7.

/70..48.O36:00..4203../42.2349030/48.48 :34..F397.7.437.7...07.234.43:3.J30./420347 890 57207.8 10.234  '0.434.0307..786:002485:0894 .0.7.54/0770.2480. 57207.O/45..43.43:37.47805:0/0.8 5.47080:3/4./42.07:3.070890/80N4  fn nf–f.

° .

..3.7.070.1:3.8.79086:01.O/4085. 5:08946:0..3.79J.f 9& €f¾ %  n n¾ 9f%% n €%%   $$¾ –° nf¯°  °°ff°©f n €   €€  n –°9f%%  n fn%    .47/.f 9&  €f¾ %  n fn%   .7J.3.O3 ./0..5E3..07032.f 9 .7.0248/0/..f 9& €f¾ %  n €%%   #0.74 .424./0:3.35.07848.f°f¾% ¯nf°f¾ %  €%n%  $$½¯ nf¯°  °° – n –°9f%%  n fn%   .7.O/41:0390/0007.4 6:0805:0/0.439094..f 9&  .42509.8 40%/00020394.76:00890..790          .:48.85.8  094/4824/4854/F8.434.39074708 /0.8 .7.9...5.3:..

f¾nf¾nf hnf¾¾°°½ ¾½ nf nf ¾  €° ½ ¾½°¾  ¾ ½ff °n€° fnf½ff¾ ° °nf  °°fnf°  ¯f°f .

.439094/0.4203.:7.8:03902... :04 05:394 5.:7.03970/485:3948 !.803.:7./.8 .3..-7.:7.05708.86:003../7E9.8507290305708.:7.70..J30..902E9..3.2.7 :3.307.7094/0.. 82..4903024897085:3948 .8/02.9:7.8843:3954.2. :35:3946:0/0130.:310703..8  6:.8..08..013...7./7.:.8.3.8 803...8007 08/0.800750742E88251.8..:.8007 9030248/485:39485.:7.7:3954/0.:7.72.:7.548. 080:.:.7.3907477E1.248./05:39074/0/-:4.4708 6:0.43:33.3908/0 ..:. 0397..43.94030.. :35:39413.8 f¾nf¾nf hnf¾fnf°n¯¾¯x ¾½ff  ©fnf¯°¾ ° nf°f¾  n ¯¾ ffn ° nf¯° ° nf°f¾½f¯¾ °½°°nf   ¾ ½° °  ¾h¾f  ½°    © %½ f¯¾¯f–°f ¾ ½°°nfn¯ –f °  ¾h¾f  h½f° ¾  ¯½ ff  ©ffnf%  ¾ ½ff ½ ¾f°fnfnf hnf  °  ¯¾  €° ½°€°f f¯¾¯f ½°¯f–°f fnf  ¾ nfhf° f °  ¾¾ ¾½°¾  &9.282.:32F94/4/0.307. 5.7 05...43/485:3948/0034 38894036:005:394 3../7E9./0.7 :3../.8..9.:7.76:0.:7./0.7.:7.:7..-0..03  30../-:.f ½nf¯¾¾½¾ nf¾ ½ ¯¾ €°f  ©f °  °  n ¯¾ ½ff ½ ¾fnf   © °°nf°f¾° n ¾f¯¾ ff¾ ° °nf¾ °  °–f© ¾ ½–f¯fn°  ¾°¾½ ¯ °  ©f½¯  f €°n° ½fh¯ ¾¯f ¯hn¾  ½ f n ¾   ©½ ¾ °ff f¯h¾n¯½nf f n– °f½½°f¾  ½f½   30890.248.8 .  &3.45:394/0310O3 !4739039.7 2. ..    8902F94/470./7. ../.573../.7..:7.6:0903/707J.435..7J..:7.48/0:3.7.8....7.7.8.  .:7.307..74.439094/0..43..47708543/03../0.974.903/03...:.84.7. ../7E9..:7.2. 6:034887.248/0..7..0%4 5.O3/.9.07.2..74.:7.8:0390.f°f¾ @....20390./0.:.0-035. 5../0137.03903/-0 54/7J.903/03./7E9.54013/0.7./003903/0708902F94/4807J./7E9.3.07..9:7./0.089E25J...0%4 5.89030248:35:3943.20390:3.8 3430..8.:../005708./7E9. 03. 5:394   807J.88O4903/70248:35:394  -f - ¯¾¾ fff¾¯ °n°f f¾nf¾   ½ ¾¾°¯h¾n¯½ ©f¾ f¾nf¾nf hnf¾ ¾ ½ ¾ f¾  ¯¾¯h¾f f°  F94/46:.7.8.:7.9:7.

  ½¯  ¯fnf n°n¯f   ¾f½¾n° ½°    ©f°nffnfnf hnf ¾  ½°° €°¯¾ffn ff¯f ff¯x f fn.

:.:7.0708:9./7E9..447.:3..431 48/.3.:7.0%4      ..../7E9...07 .870.9030248497.9 30%4    ./7E9.8J30.9 24.8030890/-:4 6:0:0480 7003.9 1  < 424805:0/0.790/0.9 30%4    .79J./.7..8 2.:7.9.:454/70248.9 6:.4.0%4      . 6:0805:0/0.07..8  1 ./0./4:3.  308:0390. @%%½ f ¾h¯½n °  n°  nf°f¾ °nf nf¾¾ ½ nf¯ fn°°ff¯f ff¯ @%%n¯ ¯¾¾ ° fn¾f°  ¾    ¾ –° ½° ¯fnf n°n©  ¾f ° °nf fnfnf hnf ¾ ½° n¯¾  ¾ ¯f–°f½ °f½f n  °fnf ¯½ ¯ ° ¾ ½ff €°n¯¾ hfnff   €°  n°¾½fh¯ ¾½n ½n     n ½°   ©f  °   ¾ €°f fnf  €° ½¾½fh¯ ¾   0254/0..074974002545.9  .9 30%4    .9 6:.0703000254 032.:7.9.5.3.9 -03!..5..:7...70.9.7.439094./7..../7.0%4    .9  .8.:.1472.7..7.3. f½ ¯¾ ° © ¯½   © °nf°f¾ °nf¯° °n  ¾nf¾nf hnf¾  .:..82E8./4               ..9.

I ¯¾f¾nf¾nf hnf¾ffx¾ ° © ¯½° fn f f©n°nf¯°¾ °nf°f¾ @.   ©f nh°–¾n° ¾°f¾ ° f f¾  If¯¾f¯¾f°°  © ¯½   © nf¯°¾ °nf°f¾°½n¯h¾ff°f  .

9 6:.870/43/0...9 89740  < $25020390.:7.4-807.8  !.8./...7:3.43.8086:3.7.9 6:.439094.708907.9 6:./000254  :3.43.-7E:3..8  1 .9 30%4  /9  7..8.ff°n – °f€°n°½fffn   nh°–¾n° ¾°f¾ ° f f¾ f¯¾ff½ff ¾  © ¯½  1:3..8086:3.70.854720/4/0485.89./7E9.7 70.0:370.8 8349.2480.07:370.6:00:8:.-0720476:F0846:0.3/4:3.9E3:470/43/0.5E3./4/0.9..7..344J.43..0%4  /9  09  /9  09 7.7.43086:3.548.O35. 39071.9 ..1./013707.9:7./4/0./:8  ../:85..:/../:8  .0%4     7.03.8/0%348.9 30%4  7.745:0/.6:074974 .4 089000254/0 97.O3 ./.9   /9 09 7.8 2.2-.2-F3708543/07./:8  .9:7.2./:8   .9E3:403.3./7..//0. .8/070..870/43/0.:7.7.54/7J.9.4203/.759449448 6:0507290.3.. 70/43/0.:7../45476:020./7../4 .9 6:../4.:7.4308/0:8:..7595..70.248.9  74:3/0/#0.707.4..7:3.4.7E209748 /909:39245. f ¯¾°f½h–°f n°°nf°f¾  ° h° nh°–n° ¾°f¾ ° f f¾°f° €f ¾f½ff ¾ ½ f n°€–f f   ° f  f¾ ¾°f¾  8:300254:354.9  ..0%4  /9   /9 7.7..703 0..8.3...8 5:08348O490302486:0539...47/70.3..:.7E209747.0850.:9/.:.9..9 .7E.7-03/4.745./.8.../:8  09  ..803 ../7E9.70.9./:8  09  .0%4   09  7.:7.086:3..20390  !.3.0%4   7.907.94374:3/0/#0.890.8 00.07/-:4803./490302486:08.8 .7..8.:7.7./.7:354.897.8:0390.8.43017.../4/0.2-.47/07.7.9 -03!.77.9 30%4  /9 7./:8  ../408.3.-.248.-07..:7../09548/07./:8  ./.7.9E3:4./.248..8..2047.7:370.9.8  47.403.248./.803./:8  .8..70.9E3:4.:7.7.9 24.70/-:4  !47:3..707./:8   .9 30%4   09 7.254/090945../7.9       < .9.42E8.3.3....43974 /02E8.:.8 °f¾½h–°f¾ f f½fff f©fn°nf¯°¾ nf°f¾ ./7.2-.44.....:7.

54/0248..20390  -f  n ¯¾   .90.9../4/0.#..7.. 7.0.7.7#0..7.9:.5E3..9     7./4.3.47/03974/02824  #.03945.7.O34494486:080.6:0908706:07/4880 800.7E3.:.07 9030/013/4:30..030.3:.9    74:3/0/#0.707.3:4 98 ..547 805./4  1 8.0.247090302486:0/08.425430390$/07485./435:99509093..:0  424805:0/0.9  .20390 08.4254303908/07 f¾f ¯¯ °°¾ f ff ½ff°f f./0449448 .8086:3.070.#.82....5745../4/070.943.3:4 7.:../897-:.06:05430470 :/07 J90302486:0800.7-03/4 .390003..254/09094  O/44494485..3.7.78039 7.75474203480.7.9 ..9 .254/090945.¾  ¾ n    ¯¾¾ ¾ff¾n½°¯f  9ff ° n ¾f¯¾ €f¯ ff¾n½ ¾½ff n¯½° ° ¾    ¾°f° €f ¾f½ff nf¯ ff ¾f¯ °f ff ¾  ¾½fff  f  nf  80...:942E9..0/03/420/..9E3:4.439094.4254303908/07089E03.7.:0 430:5./4#0./45..8  1 .6:074974..707./4  7...2-./4#0./4  < .9:.43.7.9:.¾¾°°f¾   ¾n½¾½ffn f° €fn ¾ ¾fff°f f¾    ¾nf–f½¾ ½ff   .745:8./403./4  7.  .43.207.8 2./0/08.7.3/40:8:.f f¯¾ n –ff¾n½½fff f f  f¾ ¾°f¾n¯ ¾½ ¾ff  °¾ ¾f  9¯  ¾  ¯¾ ¾f€°n°ff¾n½   n °ff ¾ ½fffnff  nh°–  nf°f¾  1:3../4  < < 47...9. :3.9.2.

   ¾ €f¯ €° f¯ °f 9¾½ ¾ ½ff½ ¯½ ¯ °f¾ n¯½° ° ¾  . ¾ ° n ¾f °  ¾½°    .

 °½°n½ n ° °f½h–°f .¾  ½ff © nfnf n¯½° °   .  ¾° n ¾ff  ¾nf–f   .

2449448    . n¯½   8J5:08 5.75987.470 . 8950909..790/08/0790302486:03.7.758470470 8.:7488.5.

...8.759.

75987.8.759 8.2449448     2470 8950909.

759.8....

74:3/ .//35 5-./8/07.42408905./8/07..439030/47/08/07 /.7.574/:.74:3/ .439030/47890/9 55.447000000 /..43974890/9 509 5-.759 :0454/7J.70.447//.24890307:3%.8.

/. .

4785./. /.'.47 .3/..

3.85.

/. .

.4 9fffnf f ¾  © nn°¾ f°f–°f¾n¾f¾ ° ¯¾n¯ °f ¾     ¯ °nf°f¾ @.5.0708.797/00894800203948 %  3/4 .759449485.439030/47 8/07..0307.72$/0730$/07 8/07.9.//.f°f .9:.54/0248..425094/0007.#.7/3E2.$905   43./ 1:3.203900..43974   7.7   .301:3.  ½ ¾ f f°¾f° ¯ °  ° ½  ¾fn¾ .943 :.47.039 /4270.3:4 :.30  (   89058    39.943  .7.425430390.7  < <  <  O/4.7  .47 809 92 :../4#0..

f°f¾ n¯f€°n° nf–f.

° .

54/0248.9E3:4870/43/0.9.4/070.07.O/4./47/3E2..7.4393:.7010703.40 3907../48   %!92 !& ..O30.70.425094/00890..f°f¾%% 094/4824/48 5.

.

.

.

%% %7..38943.

.

 995.

.

  47.

%#.

92.

%.

75987.38943.470 . /9/  92 0.92 97.2449448    . 8950909./ 8.

759.8....

2449448     2470 8950909.759 8.8.75987.

.759...8.

:.8..8./7E9.759 990:7.8..

990 8.759 .

.

#0...7..-0:3/0391..0...8 .8.3./47/00020394.3.

.

84$834.943.8 /..54//4..0....439094.8  .00.3..4390940020394 0943909 /  1 .3.3..:2039 0902039/ /.439094/0.7.70020394/4.4380:80 1:3.439094 < < 709:73$ <  ..439094  709:73.:0.3.8  1 0020394 0020394 0943909  .7.

.

9E3:4.9  ./:8  .:7.0%4   7.9.0%4   09  7.9 -03!./:8  09  ./7.9 30%4  /9 7./:8  09  .43.9 6:.8 1:3.9 24.70.9   /9 09 7.9 30%4   09 7.8703/43/0.8086:3.9 ./:8  ./:8  .94374:3/0/#0./.:370.

/45./4  1 8./:8  .9 30%4  /9  7.9  .9 6:./:8   ./7.:7.9 6:.9 6:.943.#./:8  ./4#0.0%4  /9  09  /9  09 7.9 30%4  7.9:.9 ...9.9 89740  <  1:3.9..7..3.943  ./4  7.9    74:3/0/#0./:8  .8  1 .9. 7./7.../4  7.3:4 7.8 2.9 ./1:3.9     7.7#0./:8   .3.7.78039 7.439094..:7.9.0.0%4  /9   /9 7.:7.9./4  < ./7.0%4     7../4  < <  3/4 434.

.

9  74:3/0/#0..8 .8 2..9.#0.7..9 .-24800020394....7.9       < < .439094.3.3.3..8   1 .

8..301:3.7  .43974   7.759 8./ 1:3...039 /4270.7   .//.47 809 92 :./4#0.72$/0730$/07 8/07.30  (   89058    39.9:..7  < <  <  .943 :.3:4 :.9.943  .759 3/4 .439030/47 8/07.#.$905   43.

8.759 .

3.0.3.....9:3.0.8/9 09  #0../47 .8/2.../  -4/  .

/4 #./435:99509093..:0 430:5..8 14723.3.9:.....9./4./4#0.:0  .207.2017.#..3:4 98 .

/94.//35 5-.447000000 .:5./8/07.2-./4/0-47/070/43/0.897../4 /...:./7.0.439030/47890/9 55.1472 -7-7 77.74:3/ .707.7.

./.447//./8/07.43974890/9 509 5-.74:3/ .

 ./.

4785. /../.'.47 .3/.

85.3.

/. .

5 .

-4/ .

..0..248./43/0089E000254032.5E3.43003.7..92 3.                           .

4708 8:3.7.70.030/-:49F.902E9.4250.390545:.././-:.4.7...8.8..O32. 6:05072900850..O3/0 .8007 °   ©n°   ¯ °.3.434.1.:.f°f  f f©n° nf°f¾ @.486:054/7J.086:0804-..3.:7.902E9.8 /0/80N4 .4240.O303.0743E:9...2.9F.354720/4/0:3.3903072E8/0:35:394/0310O3  F94/45./48./4!494845 .J/08::9.8031:3. .    ¾ ¯ ¾½¾ nf¾  nf¯°¾ °  ¯ °¾nf°f¾ °¾ f½  ° .:7..:9.0/80N4/0.1O72:.f¾nf¾  ¾°f¯f° f¯h¾n¯½ ©f  ¾½ n€nf  ©fnf¯°¾n¾ °   ¯ °nf°f¾ @.797.:7.7..:7.7..800780../0137.7485747...7..5.203900302:3/4/0.2.4 6:08:7O3.  24/046:0574543000708:3954/01:3.70.748.89.

/.8./7E9.3907472.2.3 485:394830... 5..0%4 5.-.0%4 90305.439094/0.7485.03 08948807J.1.35...7.8.07 02F94/4-007:7.0380:9.3.8 /05:3948 507403.82./0137.6:0 .84-70485:39486:080:9.:7.:7.8 8J6:0 .:7.7..447/03..08..47708543/03.2./.2.903/03/4.0248 80903036:00850..030.:7..89.007   ½¯ ½° ¯fnf n°n¯f   ¾ ½°°nf fnf ¾ ½°°¾  °   €° ½ ¾f ¾h¯½n ° n°  nf°f¾  ° –f °  ¾f f ½°    ©f f¯ff¯x   .447/03.089.03805:0/0.. 5.7E2097486:0..7.007 5:0805:394/0 3. 007   42454/0248.7.5:39485...7.../0137:3.8/097085:3948 /0:3.    424.3.434.307.4/0.8:03902.f°f¾¾ f°¯½ ¯ °f f¾nf¾  f½f ¾– ° ¯x   n°  nf°f¾  -007:7.:. 5..07:3/.43..24803.4254307.8  -f f¾nf¾nf hnf¾°½  ¯°f  nf¾    n  ¾  °f¾nf¾   f¯¾ ¾½°¾  ° °nf fnf ½ff ½°n½ €°f f¯¾¯f ¯ °f¾  °f¾nf¾ nf hnf¾¾¾ f f° 9fffnff ¾ ½° n¯ ° f¯¾ nf°¾fff¾ ½nfn° ¾¾   nf¾nf hnf¾  3..8.7.:7.

 @%%  .

..03:3../.9 -007:7.7003..8  1 .8 2.11 .70.703908  -f -¾¾f¾–°f¯¾n ¾   °½ff¾nf¯°¾n°f½½ f €   © n°   nf°f¾ 9 ¯¾f¾–°f°nn°°n –  °f¯f° f fn°n ¯¾  n €   nnnn€€  9 f½f f¯ x°½ ¯¾° nfn ¾n°f ¾  ° n¯f  ¯f° f¾¯ffn¯¾ fn  ° .7/... 5.:.3.:7.9 30%4    .5.54/0248...9 -03!.7.4470880297.385.0%4        .0%4        .0%4   .2348..390747805:0/0.:7.7..9 -007:7.:7..8007 f½ ¯¾n f° © ¯½½ff ¾ n ¾½ f° ¯°f  ° ° f¾nf¾   I f¯¾° nf¯° n° ° f–°f nfff¾nf¾    .0%4        .43.9  .790  47..79..7.8007 .5E3..9  .-f   ©fnf ¾ –¯ ° °nf¯° ° ¯¾ €° ¾ ¯½  f° ¯f° ½°°nf  ¾ ¾ –¯ ° nf¯° ½ ¾ ¾ –f °  ¾h ½°    © -¾¾½ f¯¾nf¯ f ¾ ½°    © ½ffnf¯ f ½¯ ½° fnf n°°ff¯f ff¯x ¯ @%%    ¾ –° ½°  ¾ f¯fnf  n   ¾f ° °nf f½¯ f½f  fnf  ¾  ° nfn°¾½fh¯ ¾½n ½n     n  ¯fnf  n©  ¾f ° °nf f¾ –° f½f  fnf  ¾ ° nfn°¾ ½fh¯ ¾½n ½n    °f¯ °  ° ¯¾ ½°€°f fnf ¯fnf  °n–¾  ¾ ° nfn°¾½fh¯ ¾   0254/0/-:4.439094.9 1$90.07705708039..3.9 30%4   .9 -007:7.//06:0..7:354.9 24.749748.748.43.42E8080002545.43.425.9.9 1  < .43...248.

0%4   .  °n¾½ ¯¾f¾–°ff ¾ %n°nf°ff½f½ffff°¾½f °nf%  n €   – f%    %  .9 24.9 1   .      .9 30%4   .9 1$90 7-.9 1$90 7-.0%4        .9  .9 24.0%4        .9 -03!.      .9 -007:7.9 -007:7.9 -03!.9 -007:7.9 30%4    .9  .9 -007:7.0%4    .0%4        .0%4        .

9 30%4    ...0%4         .0 995.23480002546:0/.9 -007:7.9 30%4   ..424805:0/0.3/4084849748.0703089003..9 1  70.

.

 /08.42.77440- .

:48..79.

002548.

92.

0 92                            .-007 .:7.

.48.759 54/70248.43.82E0308574.5.7.248./.8./47 .759/0!/0.0.803. ©f n° °  ¯h– ° ¾ °¾  ¯ °¾nf°f¾ @..7.4308.390.48.48-.70..4/0..4 20397.8J.8548-/.86:0:04539.07 1E.0303908/0../4547 03.487E1.48.759 5..34.9.89.07./089.2047.3..70.47E1.4308-.42548..8.6:07954/0.2.3:3.7.7.8./6:0 8/-:.72E0308/0143/484-70.8.43.7..7.f°f   ¯ °.4/0.248./..854/02483../..-.433:0897.70.7.:.8.86:0089F845479.7.8.433:089740/947570107/4.E2...  :04.9..203907E1.81:3.3.797/014948.:7030././... ¾f° nf  ½ fn–h€n½ ¯ %–€ ©½– ½°–%½ff°n°f¯f– ° °  ° ° nf°f¾  D°f f¾n¾f¾¯h¾°  ¾f° ¾ ½  ¯¾fn nf°   ©f¯¾ °  °   ¯ °nf°f¾ ¾ ¯½f¯¾f  nf¯ °  n° °  fn¾–h€n¾  °¾  ¾ n ¾f¯h– ° ¾ 99- ° ¾  ©¾  ff¯¾n°nf°f¾ ° ¾ fn  ¯¾n¯ ff ¾ ½° f°  f f°f¯¾  ¾ f¾f° €hn  .48903.8 42454/0248:8.8 2E030850..8  43:354.854/0248.4380:76:03:08974897./088430347208   €  °nf 9ff ° °  ¾ fn ¾f ¾ – f¾ ½nfn° ¾ .894848 40/9.7.70.O/4.8030034 4:9./.

..3.759/0.3.8.7.39074720390030./.2.8 9ff  ©f°f¯f– ° °  °¾ f .:.7.2.8.7E209748 05720740804-094.2.3.f°f¾ ½ nf f¾ ° ¾fJ n¯  F94/4/7.8.3..0 5.0 4-094*2.44.2.8:507476:07/.24897085.03  © ¯f– ° ¾° ¾ © ¾ h¾n¾ ff¾n½  f€°f f¯ ° €°n°f–f ° ¾¾ °f –f  ¾ ° f f f ¯¾ ½nf  °f°  ¾fn¾ °  ¾fJ n¯  ..8 9.. 08902F94/45079030.7592./0.. .x  f¯f– %%  ½  ° n f © n°  nf°f¾  n°f¾– ° ¾°f¾  /7.447/03.8 54746:0.7:3.2.3.:7030034  48/488:03908843..036:080/080.439094/0..03 803/4   05:394/43/080.4240248. 086:3..3:.0.7..74/0-0248..2.03030.J.03  424/0.6:074974954/0/-:4  -094.4-094/0.5703//4.7E.8/43/089:..-07 4-903/40.4...85.03    3..3908/054/073.539./0.

f°f @ff¯ ° ¯h– ° ¾ °ff¾n½  8904-094/02./.97-:94 !4/7J..807J.83..7:9..74/3E2..20390..7..82.76:0089E833.7..°n f¯ ° ¾ n¯ ° f¯¾ .-0.8 5074/02420394..72302.2.030308948 24203948089E83333.5703/07..759  .7.26:09030:34-0942.70:3.248/0.3897:.43:3..0  4308949030248:3.307....9.70.8./03.47E1..O3.2039.03/03974 804-0942.O3 1:3/.03454/02484-90307/0. 0307.7 .:3..248..4  ...

/ 9902E030803..:..3.../4/0.O3/7. 44 7.7.2.45..0303.70.O/4.3.8.2..03 5.2 87.7.947403.9 /7..7. 808:54306:0080.03 .0394434.47..8 92 53  2 434.8..3.9.72302.0...9 /7..8 I  ¯¾fn°°fn° n –n¯½  ° © ¯½ nf–f°f¯f– ° °°  ¯ °nf°f¾  92 0.7..03..3/4089.42449030248.03 54/7J..248539.943  .3.2.0 2    !074.97-:9487..20390./1:3..1:3...903.7:9.0 2    3.7.4/0497.080.9:.2.4%/43/0089F080.4089E03.7E:3 574-02..4 44 7.2.394 8320/.0..//0.2..854720/4/0.7.2./4. .3/0 5  .0 8O4./47./4333/70...0.6:00 .0  2 87.036:0089E030.7.. 8O454/0248/-:.7E030.3/4.06:00304-0942.759  &3.4308 9.0  $07J.348076:0089F 570.4 39039.42434 02480850.70../7.4/0.780  ./4 !.70.3.8..2.7..0303:3...2.7. ..2. . .1.74084 0.2.3/0 5  894.O3 5476:00890.80...20390..3/40.0850.0 2    < 0254/0/-:4/02.0  2 87.7.80:7.282.7..2.O/49030:3/09.:./03897:.7509..0894 ./47 .0.:390254 !479...7..033480/-:.3/0 5 .1.700..9 /7./08.0903024804-0942.7.7..:03.7403:3.03./.307.248/-:.3/.24880:7486:003.7:0.90723.2.03 /. 44 7./47  3..7348/008905:394 54/0248:8..72302. 90306:0/08.2..

990 8.8  ..759 1:3..3.943  ...8  1 0020394 0020394 0943909  .3.439094  709:73..943.8 /.439094 < < 709:73$ <   3/4 434.4390940020394 0943909 /  1 .70020394/4..7...8.7.3:.0.:2039 0902039/ /.439094.759./1:3.3.

.

.3.8  .3..#0.3...8 ..-24800020394..439094.9.7.8 2..7.

1 .9  .

.

2.8.0  .03.704:3.72302..759 ...0/0.43:34-0942.

.

3/.4. 44 /08.77440- 1  .&#/0.2.03 2 87.

.

0394434./1:3.03 2 434.//04-0942./013400.943  .

.

:4.0 2    < < <  .3.3.8 .03030.9 /7...2.2.

759 .8.

..8/9 09  %:3.3.8  .../ -4/  .3.0./4734845479....0..8/2.3.

..8  ..3.

-4/ .

.7.7/.79J.03:3..790  308:0390.3.. 24897..82.92 !4/0248..8                .7595..82E0308030.7.8.8/0..24897...:4.5E3.0/08/0.0/07.07000254032.078.307.5.708.248.4-09482.

 © ¯½   © °n° 9 nf°f¾ @.  .  °  °n¯¾¯h– ° ¾ f f¾½ €  ° ¾f¾½¾  ¾n°ff¾n½  ° fnf°  ½nf¯¾f¾– ° f f ¾ f f©n°¯f– ° ¾ °   ¯ °nf°f¾ @.

3:0.003 .03/4/70.57E.4-09482.79J.8.43...759 6:0.8.:4 8939.424 5..82.O030203..0354720/4/0.430/-:403./0..854720/4/0:3...248030./4.0/07.°°f° n° ¾f¾ ½nfn° ¾  ¯¾ffn¯½°f °° °  ¾f¾¯h– ° ¾  f ¯¾  f¾¯ ¾  .3/4.03/080.703:3.307...248539.8/0..759 6:0:0454/7J.3.0780:3.8/0.759  424.:4 08903/../47/0.2039084-700.794/48 4824/486:008903/04-90307:3.82.8 470248.7.79J.3.2..0705...9.03.8005.8./0.2.  .2..54720/4/02F94/40902039/ 03.05.4380:74-09482..5E3.307.078.7E209740/0391.O/41:0390 /0089000254  %7.9...036:0.8.096:09.0..0805072039./.

.

2. .03/0.72/4.:2039 0902039/ 2  .43:3.3.5.704:34-0942..0.

.

03.430J3/.5.2.2-F3/0:3../-:4030. 03:3.0/0248.9 /7./02.096:09..7.5E3.:04.8 .3.O3030.F8/077.2.2...0380347/03/0.  .08%..0/0.O/4%  .036:0.77...0 2     97.

.

705097..03/08/00.9 /7.248030.248.-.79J.:4.2.805..2.39434.6:097.08(     70.4308  .1472./02E0308 .4384:3.3/43:089744-0942.77.:2039 2.390747 547 9..0 /4..0":008.43...

.

.03302.995.0 .:34-0942.0  2.72.03 87.

.

 /08.77440- .42.

2.08.

.4348.

03031472.4242E0308.5.03    <  850.:807*4 53 2.1..9.90708031472.1./1:3./6:7F8024870249.O/4 5074..2..:76:008:3.7./0.94/..424808480020394848 .94.03 434.7.20390  .806:0 5072900850.0 2.2../03.9 /7.943  .797/0.700203948..

.

.9...F8/0:3/.2.0  2 87.:7 .0.9. /.72302.97.

1-.80 #  53.

.24897.03  ..703:3.2.2.80..4248 1:07./4034974.0/07..8& ..0/80N4/-:.9 /7.43903/4/04974 .:3.7.3.0 2     .85.3.: 2'3/467   .

.

.

2.3..3.8:3.8   %!%!& ...4384:3.3908 ..70.076:00370..4308390708..54/07.9:7.8  ..7...7:3:3.5.425094/097.:2039 0902039/ .8  0254.0 2..403..8.8 .3.3.74034974..3..2485.8 1:03908 9fffnf f ½ ¯¾  n –n¯½  °f½h–°f f ¾ ¾¾¯x ¾½fffnn f ¯h– ° ¾¯¾ff¾ ° nf°f¾  $054/7E.-.70.9 /7..3. 23.:3.3.2../046:0.8/4../.45.3./80.3/48...03/08/0:3.8..42424897..7.432E0308/0.8    8906:3949242F94/4507290.034974..3.8 &348O44.72.

.

.

.

%% .

.

 995.

.

  47.

%#.

92.

8./ 9902E030803.897.9 /9/  92 0.3..

...4390940020394 0943909 /  1 ..990 8..7.3:.759.7..3.943   .8.:2039 0902039/ /.8  1 0020394 0020394 0943909  .439094 < < 709:731.3.759 1:3.8 /.80 <   3/4 434.943.439094.70020394/4./1:3...8  .439094  709:73.3.0.

.

9 1  <   .03 .:0497.74:3..9 30%4    ...9 30%4    .7.9 30%4    .9  .8 5.3.439094.9...8 ..9  .3..9 .23403:3...4242.7..8  1 .074.3.9 30%4    .9 24.9 -03!.9 1$90   .7.480!.9  .9 30%4    .0%4    .

.

9.7..8 ..3.8 2..3....3.#0.-24800020394.439094..8  .7.

9  .1 .

.

704:34-0942.72/4.5.9 /7.43:3. .:2039 0902039/ 2  .3.03/0.0.2..2.0 2     .

.

2.2.77..0 /4.9 /7.4384:3.03/08/00./02E0308 .08(     .:2039 2.

.

2.3...4384:3.8  .8 .3.3.03/08/0:3.3...:2039 0902039/ .8/4..2..8     .9 /7..0 2.72..

.

995.:34-0942.0  2..03 87.72.0 .03302.

.

42. /08.77440- .

2.08.

.4348.

/1:3.9 /7.:807*4 53 2.0 2.2.03 434.03    <  .943  .

.

9.2.72302.F8/0:3/.9.0..0  2 87.. /.97.:7 ..

1-.80 #  53.

0.0 2    < /4.8& .9.2.:2039 2.9 /7. /.: 2'3/467   .08( 87.2.

1-.80 #  53.

: 2'3/467   < .8& .

759 .8.

/ -4/ ..8070/02E0308.70.0.3.3/4.43:3.86:00894.

.0.....8/9 09  %:3.3.3./4734845479.8/2..8  . ..3..

3.890/85...0/07/08/0..8 5 /.7..8.3430 48....759.86:05434..6:J5.

.8/9 09  #0..3../47 .3/0 5 5 .3...3.8 92 53/2 287.. 287..9:3.8/.44 7.0....

..8 .3..

 ./.

-4/ .

O2454/0248.82E0308/3E2.790  31:9:748.79J./0.43.3. 24897.92 89000254805:0/0.20390 5..5E3.7.1472..7.70248..8.0703:3.5.907.7..2-48  .8030..:4824897.:348.

¾nff  n  ¯h– ° ¾ °   ¯ °nf°f¾ .

  °½f¾f ¾fn¾ .¯nf¯ f f¯f³  nff¾¯h– ° ¾f  ©ff¾ °  ° nf°f¾ @.f°f .

f°f¾ ¾¯¾ ° n¯°n¯h– ° ¾  ¾ n n¯  ©f  n° °  °f¯f– ° °  ° °  ¯ °nf°f¾ @.  – ¯¾n°f¾ ½nfn° ¾ °  ½ ¾ °   € n ° °f¾°f¾f n°f ¾¾   ff¯ ° ¯h– ° ¾ °.

07 572074/04824/48/03.8.07:300254/0.43.2.7E5.439094/0:3.2F94/46:0/-:.74  54720/4/05.7.424/0-0248 8.08 03080.83:0.2... 47.:7.3.3.3547../4..479..6:0..9.08 6:03481.074849748/4824/48/03.3.307. 2.2.8:0390 /7....3/4.7E..434.7.248.8/20384308/0.8.7E.0 03.03.24882502039003.:8434807 574547.-J.03 548 548 .86:0/0800248 !:0/033.4.2.82E0308 /7.08.7..8 305.7..439094/0..7.2.E3/40.9.547./4  .08.08902F94/4/0./44./-:.-.0303.6:0../.7.3.7:3...24897.8  1 ..447/03.  8902F94/4/-:./....2..803489248/485.8 2.3.3./. . .2483/..7:3.7.9:7.8/2084308..8.2.034.:7..-07 5079030..2.447/03.8 548 548 .7.75:0/03807./0.9:7.808../470897.43.7.7E209748 39074720390...O3/013/.44.9  .84  8.4-094. .2.438890033..9:.4.439094..03:328245.548.8403.0.f°f¾  °¾½ ¯h°  ¯ °¾°f nff¾¯h– ° ¾f° ¾ ½°ff¾  2F94/408-038250./.O/408..03  ¯ °¾°f°f¯f– ° ¾¾ °n ¯½ ¯ °  ° ¯¾ °nff¯x  f¯f– %% °f° f ¯h¾ f¾ ¯ °¾° ¾ f¯f– °   ¯¾ ¾   © °f –f  ¾nffhf¯f– °½ff  °–ff¾ ¯ °¾° ¾ °  ¯¾ –f½°fh ° nf°f¾  ...03080:3/470.7E209748  8J6:054/0248.O3 50729008.43.9:7.03.:7..0 2.59..8/43/0..03 .../..3/4 /893948:048/05.-J..4308902F94/4 6:0.3.0.9..2..7E209748.2../..4.

.

8.2.72302.03.43:34-0942..704:3.0/0.759 ..0  ..

.

2. 44 /08.&#/0.77440- 1  .3/.03 2 87.4.

.

0394434.//04-0942.943  ./1:3./013400.03 2 434.

.

2..:4.03030.0 2       ..2.. .3.808.9 /7.3.2:506:0N..

.

:354.9 /7.47 .0 2       .42.2.

.

.0.9 /7..2.8089E08.282.2.9.8/20384308.039708.9./.9:7.08 /48/00.0 2    < < 89000254/-:.2.2.N43.N43.7  .089E./8939.9:7.. . 8370/203843.. 92.

07000254031:3.4 03494  3970485.2.2039403:3.4393:..5E3..7.03.03 ¯¯  °nff¯x  f¯f– %% ¾°½n¯h¾n¯½ © f   ° ¯¾ ° nf ¾¾ f¾½ff½  nf ¾nfff¯f– °f° ¾   ©ff ° nf°f¾ ff¯f f ° h ¾¾½fh¯ ¾  /7.9..03  !4/0248./0.0 2.../4/0:3.8 2.7 %4/4848 5.7596:06:070248539.070.8..5..03  .!:0/08.479.4 294 034 034 0343.7...3.8  1 ..7:3...O30..8:03902.9  ..O/4/0:3002546:070..3.2.43.7E209748 2..2.479008.7E2097488:039084854/024803903/07.038:0803/404-0942.790  #0.89.03 2 2 23.708.07..439094.

.

43:34-0942.0/0..0  .72302..759 .2..8.03.704:3.

.

/.3/. 5  .2.7. 8.03 2 87. 1.2.4.&#/0.

.

2.03 2 434./013400./1:3.943  .9 /7.0 2           .0394434.//04-0942.

.

/4/0.-.0 /024/46:05:0/...2.7 /0.248/070..248:303.03:35.9.9:7.08.07089080:3/400254/097.432E030803 ..8. 8370.. 0302824..7 :04/-:.73 08.0 2    < < 89000254/-:. .03473..-.08 !7207470.0.2..479.2.2..3..2..479..:3./0.:3E70.-.8  !.N43.44.8   .4...9.9 /7...7/0.3.2.03473.0 6:0.  54702F94/4/0/7..497.7....7 .

 .

You're Reading a Free Preview

Descarga
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->