Hoy le daré algo de publicidad al elemento canvas de la especificación
HTML versión 5. Esta especificación aún está en estado de borrador pero ha incluido este elemento que ya estaba presente en navegadores como
Safari y navegadores basados en Gecko 1.8 como
Firefox 1.5 y posteriores. También
Opera desde la versión 9 y
Chrome soportan canvas.
Internet Explorer no lo soporta, aunque algunas personas han querido arreglar esto. A lo largo de este artículo incluyo varios canvas y podréis comprobar si vuestro navegador los soporta simplemente viendo si aparece la imagen del canvas en vuestro navegador.
Canvas es un elemento que permite representar gráficos empleando javascript. Veamos paso por paso como podemos utilizar canvas. Primero creamos el elemento canvas en nuestro html. Este es un ejemplo
<canvas id="micanvas" width="200" height="150">Lo siento, tu navegador no soporta <strong>canvas</strong></canvas>
Sencillo ¿no?. Aquí hemos creado un canvas de 200 pixeles de ancho por 150 de alto y le hemos asignado un identificador para poder referirnos a él posteriormente. Siguiendo la especificación de w3c el valor por defecto del ancho del canvas es 300 pixeles y el del alto es 150 pixeles. Estos valores pueden ser modificados a posteriori empleando hojas de estilo CSS. Si tu navegador no soporta canvas se mostrará el contenido entre las etiquetas canvas permitiendo así mostrar contenido alternativo. Este es el efecto de este código canvas en tu navegador:
Veamos ahora como a través de javascript podemos pintar algo sobre canvas. Este es el código inicial al que hemos añadido un cuadrado rojo:
var micanvas = document.getElementById('micanvas');
if (micanvas.getContext)
{
var context = micanvas.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(20,20,100,120);
}
else
{
//canvas no soportado
}
Veamos el resultado
Atención, si se modifica el ancho o el alto del objeto canvas la imagen se borra volviendo al estado inicial. Esto se puede lograr como habíamos comentado antes a través de hojas de estilo o en javascript mediante:
micanvas.setAttribute('width',250)
ó
micanvas.width = 250;
También
micanvas.width = micanvas.with
ó
micanvas.height = micanvas.height
Borra el canvas actual pero mantiene su tamaño.
El único contexto válido actualmente es el 2d que tiene una API 2D especifica. Es posible que en el futuro surjan otros contextos, por ejemplo 3d que empleen la API de OPENGL para representar contenido tridimensional con aceleración por hardware (estaremos atentos a esto)
Algunos de los métodos empleados por la API 2d y que podéis utilizar son:
save()
restore()
scale(x, y)
rotate(angle)
translate(x, y)
transform(m11, m12, m21, m22, dx, dy)
setTransform(m11, m12, m21, m22, dx, dy)
globalAlpha [ = value ]
globalCompositeOperation [ = value ]
strokeStyle [ = value ]
fillStyle [ = value ]
clearRect(x, y, w, h)
fillRect(x, y, w, h)
strokeRect(x, y, w, h)
arc(x, y, radius, startAngle, endAngle, anticlockwise)
La lista de métodos es muy extensa aunque no todos están soportados por todos los navegadores.
Por cierto el origen de coordenadas para este contexto esta el borde superior izquierdo.
Bueno para que no os quedéis con las ganas de ver lo que se puede hacer con este elemento os paso unos ejemplos:
canvex,
racing,
benjoffe
Publicado por Abraham Covelo