CANVAS (ARCOS), HTML5 :GRAFICOS

 PRACTICA 019: GRAFICOS: CANVAS ARCOS

Ing. Honoria Reyes Macedo 

IDE: Dreamweaver, Atom o Block de notas
Lenguaje de paginas ESTATICAS: HTML(HyperText Markup Language)

Java Script

 

ACTIVIDADES

1.- En el archivo libros_HRM.html

            1.1 Agregar un canvas en un nuevo article (líneas sombreadas)

2.- Crear el archivo rebote.js en la carpeta js

Al ejecutar el erchivo html quedaría así:

3.- Llenar el circulo con arcos: Copiar del punto 2 desde la fila 17 a la 26 para cada arco

            3.1.- Modificar el valor de translate (ctx.translate(120,120))

            Los arcos deberán cumplir diferentes combinaciones de angulos de inicio y angulo final. 

Ejemplo:

4.- Agregar animación  (línea sombreada)

5.- Agregar desplazamiento.- Cambiar los valores de x e y para reubicar los arcos

Probar el html. Observar el cuadro que se limpia cada ejecución

------------------------------------------------0----0--------------------------------------

--------------------------------------------000---000-------------------------------------

CANVAS (EVENTOS), HTML5 :GRAFICOS

 PRACTICA 018: GRAFICOS: CANVAS EVENTOS

Ing. Honoria Reyes Macedo 

IDE: Dreamweaver, Atom o Block de notas
Lenguaje de paginas ESTATICAS: HTML(HyperText Markup Language)

Java Script

INTRODUCCION

En esta practica se creara una figura con canvas, incrementando el numero de figuras como respuesta al evento onclick() de los botones "Agregar" y "Cancelar" de la pantalla.

 

ACTIVIDADES

 1.- En el archivo libros_HRM.html

            1.1 Agregar un canvas en un nuevo article (líneas sombreadas)

2.- Crear el archivo agregar.js en la carpeta js

                2.1 Agregar el siguiente código  con 3 funciones en el archivo creado

3.- Agregar antes de cerrar la etiqueta </body> la siguiente linea:

<script src="js/agregar.js"></script>

4.- Agregar los eventos onclick() a los botones  “Agregar” y “Cancelar”  (líneas sombreadas)

5.- Ejecutar el archivo html para probar los botones “Agregar” y “Cancelar”

6.- Agregar la siguiente función al final del archivo agregar.js

7.- Ejecutar el archivo html para probar

8.- Hacer pruebas sin restaurar el estado original

            Nota: comentariar la línea

            canvas.restore();    

 

Quedaria asi:

-------------------------------0---0-------------------------------------------

-----------------------------000---000---------------------------------------

CANVAS, HTML5:GRAFICOS

 PRACTICA 017: GRAFICOS: CANVAS EN HTML

Ing. Honoria Reyes Macedo 

IDE: Dreamweaver, Atom o Block de notas
Lenguaje de paginas ESTATICAS: HTML(HyperText Markup Language)

Java Script

 

  

ACTIVIDADES

 1.- En el archivo libros_HRM.html

            1.1 Agregar un canvas en un nuevo article (lineas sombreadas)

2.-  Crear un archivo en java script: miscanvas.js y agregar el siguiente código

3.- Agregar antes de cerrar la etiqueta </body> la siguiente linea:

<script src="js/miscanvas.js"></script>

 

4.- Ejecutar el archivo html para probar

5.- Dibujar una pelota

      5.1.-Agregar una función al final del archivo miscanvas.js

                5.2.-Agregar antes de cerrar el if la llamada a la nueva función 

(Enviar datos de x, y , radio):

            drawBall(canvas,10,10,30);

6.- Agregar el texto dentro del if

        6.1: Antes de llamar a la funcion anterior copiar:

//Dibujar circulos

canvas.fillStyle ="#FFA500";    //Establece el color

canvas.beginPath(); //Empieza nueva figura

canvas.arc(110,80,90,0,Math.PI *2,true);    //Genera un arco o un circulo con centro en 110,25, con radio 15. u angulo desde 0 a 360 grados

canvas.fill();    //Como usa fill ya no usa canvas.closePath();

canvas.fillStyle ="#00FFFF";

canvas.beginPath(); //Empieza nueva figura

canvas.arc(300,80,90,0,Math.PI *2,true); //Genera un arco o un circulo en 135,25 con radio 20

canvas.fill();

    6.2.- Cambiar los grados de giro