Canvas (HTML)
El elemento canvas (ó lona traducido al español) es parte de HTML5 y permite la renderización scriptable dinámica de formas 2D e imágenes de mapa de bits. Se trata de un modelo de procedimiento de nivel bajo, el que actualiza un mapa de bits y no tiene una gráfica de escena integrada.[1]
Historia
Canvas fue introducido inicialmente por Apple para su uso dentro de su propio componente de Mac OS X Surgido en 2004, para potenciar aplicaciones como widgets de Dashboard y el navegador Safari. Más tarde, en 2005, se adoptó en la versión 1.8 de los navegadores Gecko y Ópera en 2006. Fue estandarizado por el Grupo de Trabajo de Tecnología de Aplicación de hipertexto Web (WHATWG por sus siglas en inglés) sobre las nuevas especificaciones propuestas para tecnologías web de última generación.
Utilización
El Canvas consiste en una región dibujable definida en el código HTML con atributos de altura y ancho. El código JavaScript puede acceder a la zona a través de un conjunto completo de funciones similares a las de otras APIs comunes de dibujo 2D, permitiendo así que los gráficos sean generados dinámicamente. Algunos de los usos previstos incluyen construcción de gráficos, animaciones, juegos, y la composición de imágenes.
Ejemplo
El siguiente código crea un elemento canvas en una página HTML:
<canvas id="example" width="200" height="200">
Este texto se muestra si su navegador no soporta la lona (canvas) de HTML5.
</canvas>
Utilizando JavaScript, usted puede dibujar en la lona (canvas):
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);
Este código dibuja un rectangulo rojo en la pantalla.
Soporte
El elemento se apoya en las versiones actuales de Mozilla Firefox, Google Chrome, Internet Explorer, Safari, Konqueror y Opera. Las versiones anteriores de Internet Explorer, como la versión 8 y anteriores no son compatibles con la lona, sin embargo plugins desarrollados por Google y Mozilla lo hacen posible.
Descripción detallada del soporte de este elemento con respecto a los navegadores más populares (como un porcentaje de participación en el mercado a partir de septiembre de 2012):
| Internet Explorer | Firefox | Safari (Desktop) | Chrome | Opera (Desktop) | Safari (Mobile) | Opera (Mobile) | Android Browser |
|---|---|---|---|---|---|---|---|
| 6.0 | 2.0 - 6.0 | 3.1 - 3.2 | 4.0 - 13.0 | 9.0 - 11.0 | 3.2 | 10.0 | 2.0 |
| 7.0 | 7.0 | 4.0 | 14.0 | 11.1 | 4.0 | 11.0 | 2.1 |
| 8.0 | 8.0 | 5.0 | 15.0 | 11.5 | 4.2 - 4.3 | 11.1 | 2.3,3.0 |
| 9.0 | 9.0 | 5.1 | 16.0 | 11.6 | 5.0 | 11.5 | 4.0 |
| 28.77% | 19.70% | 6.77% | 30.01% | 1.42% | 2.79% | 2.32% | 3.02% |
Ver además
Referencias
- ↑ Oscar Campos (20 de junio de 2011). «Introducción al elemento canvas de HTML5». Consultado el 20 de junio de 2013.
