Usando varias tecnologías para navegadores como HTML5+CSS+Javascript voy a crear el codigo para visualizar un 'Reloj'.
Creo un fichero de texto con el nombre 'reloj.html' y agrego el codigo con cualquier editor de textos.
Para escribir el codigo del programa recomiendo usar el 'Notepad++' ya que es gratuito.
Primero creo la estructura HTML con su parte CSS y JavaScript. Defino el documento HTML5 con !DOCTYPE html
<!DOCTYPE html>
<HTML>
<title>Ejemplo Reloj</title>
<head>
<!-- Estilos CSS -->
<style type="text/css">
</style>
<!-- Codigo JavaScript -->
<script type="text/javascript">
</script>
</head>
<!-- Cuerpo HTML5 -->
<body>
</body>
</HTML>
En la parte del cuerpo HTML5 se crea el canvas o lienzo. El tamaño 400 de ancho por 400 de alto. Este tamaño debe ser el mismo que se declare en la parte de CSS porque sino nos hace un escalado de la imagen.
Dentro de la etiqueta <canvas> hay un párrafo que se visualiza´en el caso que nuestro explorador no soporte la etiqueta <canvas> de Html5.
<canvas id="lienzo" width="200" height="200">
<p>Tu navegador no soporta canvas: Aquí deberías de ver una imagen: </p>
</canvas>
En la parte de estilo CSS se da al fondo de la página un color negro y al lienzo un azul claro. También se define el tamaño del lienzo a 200 ancho por 200 alto.
body
{
background: black;
}
#lienzo
{
width: 200px;
height: 200px;
background: #C3DCFC;
}
En la parte código JavaScript se crea el programa con sus funciones para que muestre el reloj analógico sobre el lienzo.
Como el reloj tiene manecillas y forma circular eso quiere decir que se va a trabajar con senos, cosenos, radianes y grados para saber en que posición del reloj esta cada manecilla.
Se crea un nuevo metodo que no existe en la clase Math de Javascript para que devuelva un valor en grados a radianes y se agrega a esta clase.
Math.degToRad = function(deg) // Agregamos método a la clase estática
{
return deg*Math.PI/180;
}
Para empezar a ejecutar el codigo JavaScript cuando toda la pagina ha sido cargada se usa window.onload=function(){ } . Dentro de las llaves estará el programa principal que ira llamando a las demás funciones. Para empezar a dibujar en el lienzo que se ha definido anteriormente se debe obtener un contexto de representación del Canvas. El contexto de representación que se usa será en 2D para gráficos en 2D. Para obtener un contexto de representación se llama al método getContext del elemento canvas.
window.onload=function()
{
ele=document.getElementById('lienzo');
ctx=ele.getContext("2d");
}
Llegados a este punto abriendo con el navegador el archivo reloj.html se veria la siguiente imagen:
Dentro de la funcion principal se agregaran variables que servirán para ayudar a las funciones que se crearan mas adelante para que sepan el punto central, margenes y tamaño del reloj. En la línea final se escribe una función con el nombre relojIniciar(); que es la que llama a las funciones restantes.
xmax=ele.offsetWidth; // ancho de lienzo
ymax=ele.offsetHeight; // alto de lienzo
xo=xmax/2; // Centro reloj coordenada x
yo=ymax/2; // Centro reloj coordenada y
radiox=xo-(xo/10); // Tamaño del radio ancho de la circunferencia
radioy=yo-(yo/10); // Tamaño del radio alto de la circunferencia
relojIniciar();
Se crea una función llamada relojCarcasa() que será la que dibuje los 12 puntos horarios en circulo. Con el metodo fillRect() se da a cada punto horario un ancho de 4x4 pixels. Con fillStyle se da un color negro eligiendo las tres componentes del color rgb a 0 'rgba(0,0,0, 1)'. Entre ctx.beginPath() y ctx.stroke() se dibuja las líneas o puntos del lienzo. Para situar los puntos horarios en circulo se hace uso de la formula polar de la circunferencia donde coordenada x=radio*sin(angulo) e y=radio*cos(angulo). En JavaScript los métodos Math.sin() y Math.cos() utilizan radianes por lo que si se piensa en grados habrá que hacer la conversión con el metodo Math.degToRad() que se había creado al principio. Para dividir una circunferencia en 12 partes se hace una parte por cada 30 grados y esto es lo que nos hace el bucle con el for.
function relojCarcasa() // Circulo con puntos
{
ctx.fillStyle = 'rgba(0,0,0, 1)';
ctx.beginPath();
for (ang=0; ang<360; ang=ang+30)
{
radianes=Math.degToRad(ang);
x=radiox*Math.sin(radianes);
y=radioy*Math.cos(radianes);
x=x+xo;
y=y+yo;
ctx.fillRect(x,y,4,4);
}
ctx.stroke();
}
Si se abre el navegador y se llama solo a la función relojCarcasa() desde la principal obtenemos esta imagen:
Se crean las tres manecillas del reloj con tres funciones llamadas relojManecillaHora(pos), relojManecillaMinuto(pos), relojManecillaSegundo(pos). Cada función recibirá un valor numérico que corresponderá a la posición de hora, minuto o segundo de la manecilla en el reloj. Con lineWidth se da grosor a la línea que dibuja la manecilla y con strokeStyle se da el color. Para dibujar las manecillas se hace con el método que dibuja líneas lineTo(x,y) siendo el origen de la línea el que posiciona con el método moveTo(xo,yo). Se usa la formula polar de la circunferencia para colocar cada manecilla en su lugar.
function relojManecillaHora(pos)
{
ctx.lineWidth = 4;
ctx.strokeStyle = 'rgba(0,0,0, 1)';
ctx.beginPath();
radianes=Math.degToRad(180-pos*30); // hora
x=radiox/1.5*Math.sin(radianes);
y=radioy/1.5*Math.cos(radianes);
x=x+xo;
y=y+yo;
ctx.moveTo(xo,yo);
ctx.lineTo(x,y);
ctx.stroke();
}
function relojManecillaMinuto(pos)
{
ctx.lineWidth = 2;
ctx.strokeStyle = 'rgba(0,0,0, 1)';
ctx.beginPath();
radianes=Math.degToRad(180-pos*6); // minuto
x=radiox/1.25*Math.sin(radianes);
y=radioy/1.25*Math.cos(radianes);
x=x+xo;
y=y+yo;
ctx.moveTo(xo,yo);
ctx.lineTo(x,y);
ctx.stroke();
}
function relojManecillaSegundo(pos)
{
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba(221,64,4, 1)';
ctx.beginPath();
radianes=Math.degToRad(180-pos*6); // segundo
x=radiox*Math.sin(radianes);
y=radioy*Math.cos(radianes);
x=x+xo;
y=y+yo;
ctx.moveTo(xo,yo);
ctx.lineTo(x,y);
ctx.stroke();
}
En este punto ya se tienen las funciones mas básicas del reloj, solo falta crear una función que asigne la hora a las manecillas y las dibuje junto a la carcasa a la cual se llamara relojAvanza(). Se utiliza la clase Date() que nos dara la hora, minutos, segundos del sistema con los métodos getSeconds(), getMinutes(), getHours().
function relojAvanza()
{
var f=new Date();
ctx.clearRect(0,0,xmax,ymax);//borra canvas, hacerla transparente o sin contenido gráfico
relojCarcasa();
relojManecillaSegundo(f.getSeconds());
relojManecillaMinuto(f.getMinutes());
relojManecillaHora(f.getHours());
}
También se necesitara otra función que se encargue de llamar cada segundo a relojAvanza() que es la que se ha llamado en un punto anterior relojIniciar(). Esta función usa el método setInterval('función()',ms) cada intervalo de un valor en milisegundos ira llamando a 'función()' en este caso 1000 será 1 segundo.
function relojIniciar()
{
window.setInterval('relojAvanza()', 1000);
}
Ya estaría acabado todo el código. Si ahora abrimos el fichero 'reloj.html' con el navegador podremos ver el reloj analógico marcando el tiempo actual.
Las variables en JavaScript se han declarado globales y se ha programado pensando en programación estructurada mediante funciones y no mediante objetos.
