Artículos
HTML5

Crear un Canvas en HTML5

07/Feb/2012

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.


  Contenido alternativo

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.

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

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().

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.

var canvas = document.getElementById("micanvas");
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.

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

ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(20,20,100,100);

ctx.fillStyle = "rgb(0,255,0)";
ctx.fillRect(60,60,140,140);

ctx.fillStyle = "rgb(0,0,255)";
ctx.fillRect(100,100,180,180);

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
1 Comentario
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios