Bienvenidos a Nuestro Mundo - A Proyectos Beta!

En nuestra vida, desde que nacemos todo lo probamos, ensayamos y testeamos; así también erramos, caemos pero por sobre todo aprendemos. Es decir, todo lo que hacemos forma parte de una nueva experiencia, de un PROYECTO. El que siempre exista la posibilidad de mejorarlo es lo que lo convierte en BETA. En este blog queremos compartir contenidos de tipo informático con artículos de programación, software libre y propietario, redes, base de datos, noticias, experiencias, etc... y también de humor. Es un sitio de todos y para todos. Participá! Sos importante ...

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>

Espero que les sirva y disfruten de esta nueva implementación del HTML 5
Para información de Canvas pueden acceder a este link Wikipedia

0 comentarios:

Publicar un comentario

Expresate y se crítico en tu vida. XD

Recibir Artículos Por Correo

Categorías

acertijos (1) adsense (1) adwords (1) AJAX (1) algoritmos (8) android (32) apple (5) autocad (1) base de datos (16) bash (1) becas (1) benchmark (1) blogger (2) blogs (27) bsd (1) buscadores (22) c# (1) CAD (1) camaras digitales (1) casting (1) CentOS (9) certificados (1) ciencia (1) CLEI (5) cloud computing (3) codigo fuente (9) Compiladores (4) Concursos (14) conferencias (24) congresos (6) consolas (7) criptografia (1) css (6) curso online (10) cursos (14) debian (50) Diseño (11) edicion video (7) emuladores (3) encuestas (2) entrevistas (9) ERTIC (1) etico (1) eventos (87) extjs (2) facebook (18) flash (2) flicker (1) FLISOL (13) geek (6) geoserver (2) GIMP (8) gis (29) Google (48) hacking (1) Hardware (30) haskell (3) HTML 5 (20) humor (261) imagenes (238) Ingenieria (14) internet (1) iphone (3) Java (42) Javascript (14) JQuery (3) juegos (36) libros (5) Linux (248) MAC (1) manga (2) Manuales (10) mapquest (1) MapServer (5) matematica (2) Microsoft (26) Microsoft Windows (27) Moviles (16) musicas (7) mysql (3) navegadores (41) newsletters (1) nokia (2) Noticias cientificas (7) Noticias Informaticas (39) Noticias varias (14) nube (1) openlayers (13) openstreetmap (10) opiniones (1) oracle (9) Paraguay (102) photoshop (1) Php (12) podcast (1) postgres (7) Programacion (135) prolog (1) proyectos (10) python (3) radio (6) Recursos (112) redes (10) Redes Sociales (62) resumenes (1) Revistas (57) ruby (2) seguridad (23) seminarios (6) sencha (2) SEO (3) Series (1) Silverlight (1) Sistema Operativo (27) smartphone (1) Software Libre (198) sun (2) tablet (19) tecnologia (24) tecnoPyensis (6) Testing (5) Trabajo (6) trucos (22) Twitter (29) Ubuntu (152) varios (113) videos (173) virtualizacion (14) visual basic net (2) web (86) wikipedia (1) Windows 7 (23) windows 8 (1) Windows XP (2) wordpress (5) xml (1)

Entradas Aleatorias

Seguidores

Últimos Comentarios