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;
}
