Este documento describe un ejercicio para desarrollar una aplicación de dibujo utilizando librerías gráficas. El objetivo es agregar botones y colores de relleno y línea, así como iconos a las herramientas. Se debe completar modificando un archivo HTML y CSS existentes, agregando imágenes a una carpeta y compartiendo el trabajo final en Dropbox.

1. Unidades Tecnológicas de Santander
Electiva Programación Multimedia
Ejercicio de aplicación de librerías gráficas.
Objetivo: Desarrollar una práctica para realizar dibujos a mano alzada, controles button, manejo
de librerías, dibujar figuras geométricas y rellenar áreas utilizando librerías gráficas.
Requerimientos:
 Archivo graf.html
 Demo.css
 Librería flashcanvas.js
 Librería canvasPaint.js
 Carpeta images
Nota: todos los archivos deben quedar guardados en una carpeta en el directorio raíz.
Procedimiento.
1. Buscar en el código del archivo html la línea de comentario <!--//definición de colores de
relleno -->
2. Aparece la definición de opciones de la barra de herramientas:
<input type="button" style="background-color: red;" value="color rojo relleno" onclick=
context.fillStyle = '#fED6F0', "canvasManager.changeFillColor('red')" />
Este crea los botones, asigna color de relleno, asigna el valor de la propiedad (value) y el
llamado a una función canvas.
Utilizando estas líneas de código, vamos a agregar los botones con los siguientes colores:
Azul, verde, amarillo, negro, rosa, marrón, violeta
3. En Colores de línea “line color”, agregar tres colores más, sin repetir los que ya existen.
4. En la barra de herramientas tools los botones aparecen sin los respectivos iconos, la tarea
es buscar unos similares el tamaño se puede reducir con paint a 30 X 30 px, todos los
iconos deben quedar guardados en la carpeta images.
Para asignarlos, busque en el código, iniciando el “body” del documento, revise los
nombres y etiquételos con los mismos nombres, con extensión PNG

2. Unidades Tecnológicas de Santander
Electiva Programación Multimedia
5. Hacer de forma similar al paso 4 con el tamaño de la línea o line size, ubíquese por el
comentario <!--Tamaños de linea--> cree en paint los respectivos iconos verifique los
nombres en el código html y nómbrelos de la misma forma con la extensión png. (ver
imagen guía)
6. De forma similar al punto anterior ponga los iconos a la barra others y asigne otro valor de
densidad para el spray.
7. Al terminar la actividad, cree una carpeta en dropbox que puede llamar “gráficos”, y la
comparte al correo jogresanor@hotmail.com.
Nota si está trabajando en pareja, favor incluir los nombres en el área de mensaje de Dropbox

3. Unidades Tecnológicas de Santander
Electiva Programación Multimedia
<input type="button" style="background-color: blue;" value="color azul relleno"
onclick="canvasManager.changeFillColor('blue')" />
<input type="button" style="background-color: green;" value="color verde
relleno" onclick="canvasManager.changeFillColor('green')" />
<input type="button" style="background-color: yellow;" value="color
amarillo relleno" onclick="canvasManager.changeFillColor('yellow')" />
<input type="button" style="background-color: black;" value="color negro
relleno" onclick="canvasManager.changeFillColor('black')" />
<input type="button" style="background-color: pink;" value="color rosa
relleno" onclick="canvasManager.changeFillColor('pink')" />
<input type="button" style="background-color: brown;" value="color
marron relleno" onclick="canvasManager.changeFillColor('brown')" />