Consejos y Trucos HTML5 – Canvas – Parte 2

Consejos y Trucos HTML5 – Canvas – Parte 2

Imagino que si estas buscando sobre Consejos & Trucos HTML5 y en particular sobre el elemento Canvas, es que conoces la base de este lenguaje de programación y que no eres un iniciado en la materia. Si no fuera el caso os recomendamos tomar contacto primero con HTML & CSS a través del sencillo tutorial que nos facilitan los compañeros de Codeacademy. Si queires también puedes ver nuestra primera entrega sobre Consejos y Trucos HTML5.

IR A TUTORIAL PRIMERA PARTE

Consejos & Trucos HTML5

Elemento Canvas

El elemento canvas en HTML5 te aporta una fácil y potente manera de dibujar gráficos utilizando Javascript. Además de dibujar gráficos, con canvas puedes realizar composiciones de fotos, animáciones simples o incluso juegos con los que los usuarios podrán interactuar.

Este elemento es una simple etiqueta que tiene solamente dos atributos específicos, width y height, además de los atributos elementales de HTML5 como id, name, class, etc.

1
<canvas id="mycanvas" width="100" height="100"></canvas>

Puedes fácilmente encontrar este elemento en el DOM utilizando el método getElementById()

1
var mycanvas  = document.getElementById("mycanvas");

Veamos un pequeño ejemplo de como sería la utilización de este elemento en un documento HTML5.

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   <body>
      <canvas id="mycanvas" width="100" height="100"></canvas>
   </body>
</html>

Este procedimiento tendrá el siguiente resultado:

Renderizando el Contenido

El canvas o lienzo está inicialmente en blanco y para mostrar algo es necesario acceder mediante un script al contenido a renderizar y dibujarlo.

Este elemento tiene un método DOM llamado getContext, que se utiliza para obtener el contenido renderizado y redibujarlo mediante funciones. Estas funciones tomarán un parametro y el tipo de contenido a dibujar será 2D.

El código mostrado a continuación muestra como obtener el contenido requerido realizando un chequeo del navegador para ver si soporta este elemento de HTML5

1
2
3
4
5
6
7
8
9
10
var mycanvas = document.getElementById("mycanvas");

if (mycanvas.getContext){  
   var ctx = mycanvas.getContext('2d');  
   // escribir el código aquí  
}

else {  
   // Código alternativo
}

Ejemplos de utilización del Canvas

Este elemento puede ser uno de los más extensos y maleables del lenguaje HTML5. A medida que vayamos realizando entradas relaccionadas con los ejemplos prometidos iremos colocando los enlaces aquí.

Más sobre Canvas HTML5

Si quieres aprender más sobre algunos consejos y trucos sobre Canvas HTML5 te recomendamos visitar la continuación de este tutorial donde trataremos como dibujar linear y formas en Canvas HTML5

IR A SEGUNDA PARTE

Related Posts

Leave a reply