Cuando introducimos el elemento Canvas, se creará por defecto un área de color blanco de 300 pixels de ancho por 150 pixels de altura cuyos valores pueden ser modificados a través de sus atributos.
Exceptuando Internet Explorer, todos los navegadores actuales dan soporte para el Canvas HTML5, como podemos ver en la siguiente tabla:
Chrome | Soportado desde la versión 1.0 |
Firefox | Soportado desde la versión 1.5 |
Opera | Soportado desde la versión 9.0 |
Safari | Soportado desde la versión 1.3 |
Internet Explorer | No soportado. Se espera a partir de la versión 9.0 |
Si quisieramos poder utilizar la nueva funcionalidad del Canvas API de HTML5 en IE, podremos utilizar el proyecto explorercanvas. Luego añadir el siguiente codigo:
<!--[if IE]><mce:script mce_src="excanvas.js"></mce:script><![endif]-->
Para incluir el elemento Canvas simplemente tendremos que añadir la siguiente etiqueta: <canvas></canvas>
Es posible que algún navegador no interprete correctamente la etiqueta canvas, por lo que si qusisieramos mostrar algún mensaje, o imagen alternativo podremos hacerlo incluyendo las etiquetas HTML que consideremos dentro del elemento canvas:
<canvas>
Tu navegador no soporta HTML5, por qué no lo actualizas?
</canvas>
Si queremos chequear si el navegador interpreta o no el elemento canvas de HTML5 podemos utilizar el siguiente script en Javascript:
try{
document.createElement("canvas").getContext("2d");
alert("HTML5 es soportado en tu navegador");
} catch(e) {
alert("HTML5 no está soportado en tu navegador");
}
Este código intenta crear un elemento canvas, y acceder a su contexto. Si hubiera algún error, se capturaría y se mostraría el mensaje de alerta.
Un ejemplo sencillo de las API del canvas el cual pinta una línea:
<script>
function pintarLinea() {
// obtenemos el canvas y su contexto
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(0, 50);
context.lineTo(200, 50);
//Refrescamos el canvas con lo que hemos pintado
context.stroke();
}
window.addEventListener("load", pintarLinea, true);
</script>
No hay comentarios.:
Publicar un comentario