Día #12 Empecemos a trabajar con canvas en HTML5

Una de las grandes novedades de HTML5 es el elemento canvas que en español la podemos llamar “lienzo”, que lo podemos utilizar para dibujar gráficos en el documento web utilizando secuencias de comando (generalmente javascript). Vamos a poder dibujar cualquier cosa que nos podamos imaginar claro esta (utilizando javascript), esto es realmente buenos para nuestros proyectos web, por que mejorara el rendimiento de las misma ya que no vamos a tener que cargar muchas imágenes como antes, ya que con Canvas vamos a crear formas, líneas, degradados, textos, arcos, patrones y muchas cosas más, como el manipular pixeles de las imágenes y manipular videos. En este tutorial veremos lo básico para empezar a trabajar con canvas y en posteriores tutoriales avanzaremos mucho más.

Primero veamos el soporte de canvas en los diferentes navegadores:

soporte canvas navegadores

Bueno antes de empezar ten en cuenta que Usar el elemento <canvas> no es muy difícil, pero sí es necesario un conocimiento básico de HTML y JavaScript . Ahora si, a Comenzar

Creación de un elemento Canvas

El primer paso para la utilización de canvas es añadir su etiqueta <canvas> y su cierre </canvas>.

En el código anterior podemos ver la apertura y cierre de el elemento canvas, dentro de estas etiquetas podemos colocar un mensaje que solo será leído o solo se interpretara si el navegador no soporta canvas. Podemos colocar cualquier mensaje incluso un link para invitar a actualizar su navegador.

A este elemento le podemos aplicar 2 atributos width, height (ancho y alto) estos atributos son opcionales es decir podemos especificar o no. Ahora, al no especificar el ancho ni el alto el valor inicial será 300px de alto * 150px de alto.

Ahora, también le podemos identificarlo por medio de un ID o una Clase para poder personalizarlo mejor por medio de CSS y manipularlo o identificarlo mejor con Javascript.

explicacion-canvas

Primer Ejercicio con canvas.

Tendremos el siguiente resultado:

ejemplo-canvas

Ahora analicemos el script que nos produjo el cuadro azul:

canvas-script

Claro, esto es lo más simple de canvas, como dije al principio, podemos crear muchas cosas sorprendentes con esta nueva herramienta de HTML llamada canvas o lienzo en español.

Para saber mas sobre canvas: http://www.w3schools.com/html5/html5_canvas.asp

 

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo