CoolClock: Usando canvas para crear relojes

CoolClock es un script para crear relojes y utiliza la etiqueta CANVAS para dibujarlos. Debería funcionar en cualqueir navegador aunque en Internet Explorer es necesario agregar un script extra y el resultado es ... limitado. En esta entrada no estoy usándolo así que no se verá.

Lo más interesante es que es posible crear diseños personales aunque, claro, hacer eso no es nada sencillo. Algunos de esos diseños podemos verlos online en una página demo.

Para utilizarla, debemos descargar el script coolclock.js desde la página del autor y utilizar Explorer Canvas que podemos descargar desde Google Code.

Vamos a poner ambos scripts antes de </head>:

<!--[if IE]>
<script type="text/javascript" src="URL_excanvas.js"></script>
<![endif]-->
<script src="URL_coolclock.js" type="text/javascript"></script>

Eventualmente, si queremos, también podemos descargar el archivo moreskins.js que contiene todos los modelos extras y eso lo agregamos inmediatamente después de lo anterior:

<script src="URL_moreskins.js" type="text/javascript"></script>

Luego, donde quisiéramos que se viera el reloj, ponemos algo así:

<canvas id="mireloj" class="CoolClock:nombreskin:radio"></canvas>

Aparentemente, si se tiene jQuery cargado, no hace falta hacer nada más pero, como acá no está cargado, lo que debe hacerse es activarlo de este modo:

<script>CoolClock.findAndCreateClocks();</script>

En la clase CSS siempre colocamos CoolClock y luego, separando los datos con dos puntos, podemos agregar valores opcionales:

• nombreskin indica el tipo de diseño gráfico (por defecto es swissRail pero, en el script original hay más: chunkySwiss, fancy, machine, classic, modern y simple. Si agregamos el script moreskins.js tendremos muchísimas más opciones.
• radio es el tamaño y por defecto es 85; es un valor expresado en pixeles
• noSeconds elimina la aguja del segundero

Si se quieren omitir parámetros, se deben agregar los dos puntos igual así que para usar el modelo por defecto pero sin segundero, pondríamos:

class="CoolClock:CoolClock:::noSeconds"

Como en la etiqueta CANVAS podemos agregar un ID cualquier, luego, con CSS, es posible agregarle fondos, alinearlo, etc.