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

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

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')" />