Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

Canvas básico II

Iniciar canvas

Código básico

Como vimos en la página anterior, hay un código básico en javascript necesario para iniciar canvas, después de iniciar este es:

window.onload = function(){
var canvas = document.getElementById('micanvas');
var contexto = canvas.getContext('2d');
}

Sin embargo canvas no es compatible con todos los navegadores, o puede ser que haya algún fallo, debemos asegurarnos de que canvas funciona, y si no es así, que no anule el resto de código javascript que pueda haber en la página.

Función de inicio de canvas

Tenemos que elaborar un código que en caso de que canvas no funcione el navegador no haga nada. Completamos el código anterior con una serie de comprobaciones:

window.onload = function(){
//Obtenemos el elemento canvas
var elemento = document.getElementById('micanvas');
//comprobamos si encontramos un elemento
//y si éste es compatible con canvas mediante getContext()
if (elemento && elemento.getContext) {
    //Accedemos al contexto de '2d' de canvas
    var contexto = elemento.getContext('2d');
    if (contexto) { //si tenemos el contexto podemos empezar a dibujar:
       contexto.fillRect(10,10,160,110); //realizamos el dibujo
       }
    }
}	 		 

El código está comentado para que sea más fácil entender lo que hemos hecho.

Sin embargo este código es bastante complicado, ya que tenemos que poner el dibujo dentro de unas estructuras if, y lo que se trata es de que podamos acceder a canvas de una forma segura y sencilla.

La solución está en poner todo este código dentro de una función, a la que llamaremos cada vez que queramos trabajar con un nuevo canvas:

function iniciaCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if (elemento &&  elemento.getContext){
    var contexto = elemento.getContext('2d');
    if (contexto) {
       return contexto;
       }
    }
    return false;
}

La función tiene el mismo código de comprobación que el script anterior, pero ahora es más fácil trabajar con él. en el parámetro de la función idCanvas debemos pasar el "id" del elemento canvas. La función nos devuleve el contexto en caso de que exista, o false si éste no existe.

Por tanto ahora para trabajar con un elemento canvas sólo tenemos que llamar a la función y comprobar que el contexto existe:

window.onload=function() {
//llamamos a la función canvas:
contexto=iniciaCanvas("micanvas"); 
//comprobamos el contexto
if (contexto) { 
    //empezamos a dibujar:
    contexto.fillRect(10,10,160,110);  
    }
}

Ahora sólamente tenemos que llamar a la función y comprobar que devuelve el contexto.

Ya sólo nos queda poner el código HTML de canvas, tal como explicamos en la página anterior:

<canvas id="micanvas" width="400" height="300">
<p>Tu navegador no es compatible con canvas, cambia a 
   Firefox, Safari, Chrome o Opera.</p>
</canvas>

Recuerda que la etiqueta canvas debe llevar siempre los atributos id, width y height. El atributo id nos sirve para llamar a la función que inicia canvas, mientras que los atributos width y height nos sirven para dar las medidas del lienzo de canvas. Podemos poner también más atributos o código CSS asociado.

El texto que hay dentro de la etiqueta canvas es opcional, y aparece sólo en caso de que el dibujo con canvas no funcione.

Podemos poner varios canvas en la página. La función iniciaCanvas() nos sirve también para iniciar estos otros canvas, sólo tenemos que llamarlas con su atributo id:

...
contexto=iniciaCanvas("micanvas2"); 
if (contexto) { 
    contexto.fillRect(10,10,160,110); 
    //aquí seguimos poniendo el dibujo ... 
    }
...

Si tenemos varias páginas con lienzos de canvas, podemos también sacar la función de inicio a un archivo javascript aparte, y poner en cada una de ellas el link a esa página:

<script type="text/javascript" src="inicioCanvas.js"></script>

Canvas en Internet Explorer.

En principio canvas no funciona en Internet Explorer, sin embargo podemos hacer que funcione gracias a una librería externa llamada "flashcanvas". Lo primero que tenemos que hacer es descargarnos la librería en la página http://code.google.com/p/flashcanvas/. Abrimos esta página, y en la parte de arriba, en la barra de navegación, pulsamos en "Downloads".

página de flashcanvas

Se nos abre otra página desde la que podemos hacer la descarga:

página de flashcanvas

Pulsamos en la flecha verde delante de donde pone "FlashCanvas-20110201.zip"; se nos abre el cuadro de diálogo para descargar el flashcanvas.

Flashcanvas está en un archivo comprimido tipo ".zip". Una vez hemos descomprimido el archivo tenemos una carpeta llamada FlashCanvas. Dentro de esta carpeta tenemos otras tres carpetas: bin, doc y examples. La carpeta bin contiene los archivos que nos interesan. La carpeta doc contiene información sobre los autores, la licencia y otras cosas. La carpeta examples contiene algunos ejemplos realizados con flashcanvas.

Nosotros sólo necesitamos la carpeta bin por lo que la cogemos y la pegamos en nuestro sitio.

Si abrimos esta carpeta vemos que hay varios archivos, todos son necesarios para que funcione "flashcanvas", sin embargo nos fijamos en el archivo flashcanvas.js.

Lo único que tenemos que hacer para que funcione "flashcanvas" es crear un link de javascript hacia este archivo:

<script type="text/javascript" src="bin/flashcanvas.js"></script>

Sin embargo, como queremos que este link se active sólo cuando el usuario utilice Internet Explorer, Pondremos un filtro a este link, de manera que el código quedará de la siguiente manera:

<!--[if lt IE 9]>
<script type="text/javascript" src="bin/flashcanvas.js"></script>
<![endif]-->

Esto hace que el script se active sólo para versiones anteriores a Internet Explorer 9.

Ejemplo de inicio de canvas

Vamos a mostrar el código completo para iniciar canvas, también en Internet Explorer.

En primer lugar creamos el archivo iniciaCanvas.js, que contendrá la función de inicio:

function iniciaCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if (elemento &&  elemento.getContext){
    var contexto = elemento.getContext('2d');
    if (contexto) {
       return contexto;
       }
    }
    return false;
}

Después creamos la página en la cual tendremos que añadir un link hacia este archivo y otro hacia flashcanvas, además del código de dibujo de canvas y su html:

<!DOCTYPE HTML>
<html>
<head>
<title>micanvas</title>
<script type="text/javascript" src="iniciaCanvas.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="bin/flashcanvas.js"></script>
<![endif]-->
<script type="text/javascript">
window.onload=function() {
contexto=iniciaCanvas("micanvas"); 
if (contexto) { 
    contexto.fillRect(10,10,160,110); 
//aquí podemos seguir con más instrucciones de dibujo 
    }
}
</script>
</head>
<body>
<h1>Inicio de canvas</h1>
<canvas id="micanvas" width="400" height="300">
  <p>Tu navegador no es compatible con canvas, cambia a 
  Firefox, Safari, Chrome o Opera.</p>
</canvas>
</body>
</html>

El ejemplo anterior puedes verlo funcionando en el siguiente enlace:

Ejemplo canvas

Este es un ejemplo muu sencillo en el que dibujamos un rectángulo. En páginas posteriores aprenderemos a dibujar cosas más complicadas. Lo que importa aquí, y lo puedes comprobar, es que este ejemplo funciona en todos los navegadores, incluido Internet Explorer.






En la siguiente página aprenderemos a hacer dibujos con canvas. empezaremos por dibujar rectángulos.

Rectángulos



Manual Canvas Básico

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo