Me propongo para este próximo año aprender a usar HTML5 y CSS3.
Hoy hice mi primera animación utilizando este lenguaje y mis conocimientos del HTML y CSS en general, con lo cual no sé si estoy utilizando correctamente todos los elementos o si estoy mezclando versiones (lo cual es muy probable).
Con todo mi entusiasmo logré hacer una humilde animación de un amanecer, basándome en estas explicaciones:
-Crear una pelota moviéndose horizontalmente usando HTML5: Animación con HTML5 Canvas y Javascript
-Utilización de capas en HTML: Capa sobre capa con z-index
Mi código es idéntico al de la explicación de la pelota moviéndose horizontalmente, pero simplemente modifiqué la dirección del movimiento (vertical) y el color de la pelota, devenida sol 🙂
Además agregué una capa con un z-index 0, cuyo background es una imagen de pasto que dibujé con Gimp (que tiene un fondo transparente gracias a ser un archivo PNG).
El ejemplo terminado por hoy: Amanecer
Este es el código html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="amanecer.css" />
<title>HTML5 Ejemplo 1</title>
<script type="text/javascript">
var posX;
var can;
var contexto;
var direccion;
window.onload = function() {
can = document.getElementById("miCanvas");
contexto = can.getContext("2d");
posY=15;
direccion = 0;
setInterval("dibujar()",20);
}
function dibujar() {
if (direccion == 0)
posY++;
else
posY--;
if (posY==350)
direccion = 1;
if (posY==50)
direccion = 0;
can.width = can.width; // limpia el canvas
contexto.strokeStyle = "#FFFF00";
contexto.fillStyle = "#FFFF00";
contexto.beginPath();
contexto.arc(100,posY,50,0,Math.PI*2,true);
contexto.closePath();
contexto.stroke();
contexto.fill();
}
</script>
</head>
<body>
<div id="pasto"></div>
<canvas id="miCanvas" height="200" width="400"
style="border: 1px solid #c3c3c3">
</canvas>
</body>
</html>
Y aquí el CSS:
body {
background:#66ccff;
}
div#pasto{
z-index:0;
position: absolute;
top:7em;
left:0;
background:url(piso.png) repeat-x;
width:25em;
height:20em;
}
Iris: Yo también tengo esperando una colección de info sobre HTML5 que me propuse aprender este 2012. Pero la diferencia es que yo todavía no arranco, recién estoy apagando los motores del 2011…
Ante cualquier duda ahora ya sé a quién puedo preguntar (o por lo menos, ¡con quién compartirla!)
El mejor 2012 para vos!!!
¡Hola Ricardo! Buenísimo esto de tener con quién compartir los progresos, siempre que se acepten nuevas preguntas como respuesta…
En Gleducar armamos un grupo de autoformación sobre HTML pero no se está moviendo, igual estás invitado a participar.
Hola Iris!
Me alegra leerte y ver tu blog que es genial.
Gracias por pasar por nuestro sitio Css3 y HTML5. Me alegra que nos leas también y que te sean útiles nuestros tutoriales.
Saludos y muchas gracias 🙂