Proyectos Beta: Usando Canvas en HTML 5

La nueva especificación del HTML 5 no esta terminada, pero algunos navegadores ya están implementando algunas partes. Realmente es una especificación que dentro de unos años se estará adoptando, porque trae muchas novedades que a mi me sorprendieron.
Una de las novedades más interesantes que encontré fue Canvas. Si no sabían Canvas lo había creado la propia Apple, pero libero para que la W3C lo incluyera en su nuevo Standard.
Los navegadores que ahora implementan algunas novedades del HTML 5 son:
• Chrome 3.0.195.33
• Mozilla Firefox 3.5.5
• Safari = 4.0.4
• Opera 10.10

Internet Explorer 8 no lo soporta todavía en esta fecha(10/12/2009), pero creo que lo harán en un futuro no muy lejano.

En los navegadores que había citado anteriormente, había hecho un código para probar un ejemplo.
Se dibuja una tabla de ajedrez en la pagina html empleando canvas.

Este es el resultado:

Muchos pensaran que fue hecho con otro programa como un editor de imágenes. Pero se equivocan. Es con la nueva especificación del HTML.

El código del ejemplo es:



<html>



<head>



<title>Tabla de Ajedrez con Canvas</title>



<script>



// Recibe un identificador del elemento canvas y carga el canvas



// Devueve el contexto del canvas o FALSE si no ha podido conseguir



function verificarExistenciaCanvas(idCanvas)



{



var elemento = document.getElementById(idCanvas);







if(elemento && elemento.getContext)



{



var contexto = elemento.getContext('2d');







if(contexto)



{



return contexto;



}



}



return FALSE;



}







window.onload = function()



{



// Recibimos el elemento canvas



var tablaAjedrez = verificarExistenciaCanvas('ajedrezCanvas');







if(tablaAjedrez)



{



// Cambiar de color a negro



tablaAjedrez.fillStyle = '#000000';







// Dibujar un rectangulo grande



tablaAjedrez.fillRect(0,0,420,420);







var ejeX = 10;



var ejeY = 10;



// Dibujar los cuadraditos blanco y negro sobreescribiendo el cuadrado grande



for(var fila = 1; fila <= 8; fila++)



{



for(var columna = 1 ; columna <= 8; columna++)



{



if((parseInt(columna + fila) % 2) != 0)



{



// Blanco



tablaAjedrez.fillStyle = '#ffffff';



}



else



{



// Negro



tablaAjedrez.fillStyle = '#000000';



}







// dibuja un rectángulo



tablaAjedrez.fillRect(ejeX,ejeY,50,50);



ejeX += 50;



}



ejeX = 10;



ejeY += 50;



}



}



}



</script>



</head>



<body>



<br><br>



<center>



<canvas id="ajedrezCanvas" width="450" height="450">



Tu navegador no soporta canvas.



</canvas>



</center>



</body>



</html>