Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Canvas básico

Crea tus propios dibujos y animaciones con Canvas en HTML5

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

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, Opera ó IE10.</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, versión 8 y anteriores, 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".

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

Pulsamos en la flecha verde delante de donde pone "FlashCanvas-20110201.zip" (actualmente hay una versión nueva y pone "FlashCanvas-20131211.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 muy 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

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com