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