Crear un Canvas en HTML5

07/Feb/2012 HTML5 , , , Deja un comentario

El canvas es un elemento que aparece nuevo en HTML5 y que nos permitirá la gestión de gráficos. Así podremos dibujar gráficos, crear foto composiciones, realizar animaciones,...

Para crear un canvas en HTML5 tenemos que utilizar el elemento CANVAS.

  1. <canvas>
  2. Contenido alternativo
  3. </canvas>

A un elemento CANVAS podemos darle un alto y ancho mediante los atributos height y width respectivamente. Así como darle un identificador mediante el atributo id.

  1. <canvas height="300px" width="300px" id="micanvas"></canvas>

En el caso de que no indiquemos las dimesiones, estas serán de 300x150.

Una vez que tenemos nuestro "lienzo" vamos a dibujar algún gráfico. Para ello utilizaremos el lenguaje Javascript. Así lo primero que haremos será obtener la referencia sobre el CANVAS mediante un getElementById().

  1. var canvas = document.getElementById("micanvas");

Dentro de un CANVAS podemos volcar varios contextos. Lo que son conocidos como contextos de renderizado. Así podremos tener contextos 2D y 3D. Estos últimos todavía en fase experimental. El método .getContext() sobre el CANVAS nos permitirá crear un nuevo contexto.

  1. var canvas = document.getElementById("micanvas");
  2. var ctx = canvas.getContext("2d");

Ahora ya pasaremos a dibujar gráficos. Así, con el manejo de una propiedad: .fillStyle y un método .fillRect() podemos crear rectángulos de colores. En el caso de .fillStyle recibe como parámetro un color definido en formato RGB y en el caso de .fillRect() las coordenadas de los vertices superior izquierdo, así como el alto y ancho.

Así nos quedará el código que insertará gráficos al crear nuestro primer canvas con HTML5.

  1. var canvas = document.getElementById("micanvas");
  2. var ctx = canvas.getContext("2d");
  3.  
  4. ctx.fillStyle = "rgb(255,0,0)";
  5. ctx.fillRect(20,20,100,100);
  6.  
  7. ctx.fillStyle = "rgb(0,255,0)";
  8. ctx.fillRect(60,60,140,140);
  9.  
  10. ctx.fillStyle = "rgb(0,0,255)";
  11. ctx.fillRect(100,100,180,180);

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*