011  Graficos: Animacion desde html

Ing. Honoria Reyes Macedo

INTRODUCCION: En esta practica se ejecutaran funciones de javaScript usando etiquetas de html. Estas funciones mostraran los resultados en un canvas del html

Para llevar a cabo esta actividad se debera tener una pagina html dividida en varias secciones

Actividad 1

a) En el archivo html> Crear una tabla y usar sus celdas para ejecutar las funciones.

Por ejemplo:  Se crea una funcion que reciba dos parametros de x e y

               <table>

                  <tr>

                               <td onclick="ObtenerXY002(140,120);">Manipular</td>

                               <td onclick="ObtenerXY(event);">Empezar</td>

                 </tr>

               </table> 

               <button type="button" onclick="fondo();"> Parpadear </button>

b) En el archivo css: Le damos formatoa la tabla

                table, tr, td{

                                border:#009;

                                border:groove;                                

                                }

c) Enel archivo js: Creamos una funcion duplicada de ObtenerXY y la renombramos ObtenerXY002, para que reciba dos parametros, quedaria asi:

     function ObtenerXY002(tempX2,tempy2){     

                   try{                    

                                coX = [tempX2, tempX2+190];

                                coY = tempy2;

                   }catch(err)                       {

                                                alert(err.message);

                   }

                                 return true;

     }

Actividad 2. En la tabla creada agregar celdas para animar las imágenes del canvas creado.

                Ejemplo:  En el archivo *.js Crear una funcion que contenga la siguiente linea

                function verImagen(hastaX, hastaY){

                                canva10.drawImage(imgss,120,0, hastaX,hastaY); // escalado imagen completa

                }

               

En html en la tabla creada: Agregar una celda que  enviara parametros a la funcion verImagen   para hacerla mas chica o mas grande

<td onclick=" verImagen (100,50);">Ver Imagen</td>