Subscribe

lunes, 20 de septiembre de 2010

Introducción al objeto CANVAS de HTML5

Aprovechando el blog de mi compañero Sergio, me gustaria contaros mi experiencia con el objeto CANVAS de html5.

¿Que es canvas?

Para que os hagais una idea de que es CANVAS es lo mas parecido a tener un trozo de papel en blanco encima de la mesa para poder dibujar, pintar, escribir y borrar lo que nos de la gana de forma no estructurada.

¿Por qué nace el objeto canvas?

Hasta ahora cuando un programador queria mostrar alguna animación en la pantalla una de las posibilidades que tenia era usar el plugin flash o cualquier otro plugin del estilo. Si queria crear una grafica estadistica podia llamar a alguna libreria de php que le creara la imagen en el servidor.
En cualquier caso siempre se dependia de algo externo al navegador. Asi pues era necesario que el propio navegador pudiese hacer este tipo de cosas, la solucion: CANVAS.

Basta de tanto rollos queremos verlo.

Para ver algo necesitamos poner un objeto CANVAS en nuestro html y cogerlo en javascript por ejemplo:

<html>
<head>
<script>
   function cargado(){
      var objetoCanvas = document.getElementById("html5pasoapaso");
      if(objetoCanvas.getContext){
         var contextoCanvas = objetoCanvas.getContext('2d');
         contextoCanvas.font = "20px Times New Roman";
         contextoCanvas.textAlign="center";
         contextoCanvas.fillText("Hola Mundo. HTML5 paso a paso" ,300, 150);
      }
   }
</script>
</head>
<body onLoad="cargado();">
<canvas id="html5pasoapaso" width="600" height="300"><b>Este navegador no soporta canvas.</b></canvas>
</body>
</html>

Si vuestro navegador no soporta el objeto canvas aparecera lo que pongamos dentro de la etiqueta canvas (podemos aprovechar para enlazarlo a descargar otro navegador).

Si lo soporta podremos ver el texto "Hola Mundo..."

¿Muy bien, que hemos hecho?

Pues muy simple hemos creado un objeto canvas y hemos dibujado dentro de él un texto. Si os fijais hemos esperado a que este cargado el html, ya que si hubiesemos intentado dibujar antes da un error al no existir el objeto.

¿Solo sirve para dibujar textos?

No, sirve para dibujar puntos, lineas, poligonos, circulos, curvas, textos, imagenes previamente cargadas, etc... y en un futuro (no muy lejano) poligonos en 3d con texturas.

¿Funciona en todos los navegadores?

Casi, hasta el momento funciona en todas las versiones actuales menos IE8, aunque esta confirmado que funcionará en la version 9. Esta dentro de la especificación standard de HTML5 y por lo tanto no debemos preocuparnos porque todos los navegadores lo implementaran.

¿Que se puede hacer con esto?

Practicamente todo lo que se podia hacer con flash y más, graficas, juegos, mapas y todo dinamico con javascript.

¿Por qué es mejor elegir canvas que cualquier otra opción?

Porque el trabajo duro lo hace el cliente, dejando libre al servidor, canvas usa aceleraccion por hardware lo cual lo hace muy rapido. No necesita instalar nada en el navegador. Se maneja de forma sencilla con javascript. Y un sinfin de ventajas.

Esto solo ha sido una introducción, en el proximo tutorial nos adentraremos más en el dibujo estatico con canvas.

1 comentario:

Anónimo dijo...

hola muy bu articulo, queria preguntarte si pudieras realizarnos un pequeño ejemplo de como seria una animacion con canvas

Publicar un comentario