Gráficos en HTML5

GRAFICOS EN HTML5

CANVAS

La etiqueta canvas nos permite dibujar usando operaciones con javascrit en un área rectangular dentro de una pagina html.

Creamos una estructura inicial, la cualtendrá un body y crearemos una nueva etiqueta canvas, la cual tendrá un mensaje en sus interior, la cual será visible únicamente cuando el navegador no soporte la etiqueta canvas.




Tu navegadorno soporta Canvas




Ahora le agregamos atributos como el id, el ancho y alto que deseamos para que tenga este lienzo de dibujo y otras propiedades de estilo que deseemos.


Tu navegador nosoporta Canvas


Ustedes podrán personalizar el canvas como uds lo deseen.
Una vez tenemos el canvas debemos añadir un script de tipo javascript para crear nuestro primer dibujo.
Para empezar atrabajar con el canvas lo capturaremos usando la propiedad getElementById de javascript, esta línea nos permitirá capturar el objeto en una variable mediante su id, la cual usaremos. Para este primerdibujo crearemos un cuadro de color dentro del lienzo


var c=document.getElementById("miCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="Blue";
cxt.fillRect(50,10,200,100);


Una vezseleccionado debemos definir el contexto que usaremos; por ahora solo se puede trabajar el context 2d, ya que los navegadores todavía no soportan el contexto 3d el cual se denomina webgl.

Dentro deeste contexto definiremos una regla de relleno, fillStyle con color rojo o azul; ahora dibijamos un rectángulo con la función fillRect la cual lleva cuatro coordenadas. Las dos primeras nos permitendefinir la esquina superior izquierda del rectángulo en donde estará ubicada y las otras dos definen el ancho y alto del rectángulo.

CREACIÓN DE TRAZADOS

Para el segundo ejemplo dibujaremos unmensaje de saludo hola usando las instrucciones de dibujo contenidas en canvas. Empezaremos un archivo con estructura html:



Tu navegador no soporta Canvas




Ahora con javascript...