Cómo programar un reloj JavaScript basado en el canvas de HTML5. Parte I

A petición de uno de vosotros, estos días vamos a hacer unos ejercicios muy chulos que espero que os gusten. La siguiente serie de posts self-explanatory tiene como objetivo programar un súper reloj JavaScript basado en el nuevo elemento canvas de HTML5.

Para sentirte cómodo en el seguimiento de estos ejercicios debes, por tanto, tener un conocimiento avanzado de JavaScript y estar un poco al día del funcionamiento de HTML5.

Reloj

Éste es el código esqueleto OO de nuestro reloj JavaScript que irá evolucionando hasta integrarse en el canvas de HTML5:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="public/js/jquery.js"></script>
        <script>             
            function Clock(date) {                 
                this.date = date;              
            }
             
            Clock.prototype.secondUp = function() {                                 
                this.date.setTime((this.date.getTime() / 1000 + 1) * 1000);
                 
                return this.date;                 
            };
             
            Clock.prototype.minuteUp = function() {                 
                this.date.setTime((this.date.getTime() / 1000 + 60) * 1000);
                 
                return this.date;                 
            };
             
            Clock.prototype.hourUp = function() {                 
                this.date.setTime((this.date.getTime() / 1000 + 3600) * 1000);
                 
                return this.date;                 
            };
             
            $(function() {                 
                date = new Date();                 
                clock = new Clock(date);                 
                $('#clock').append('<p>'+ date +'</p>');                 
                $('#second-up').click(function() {                     
                    $('#clock').empty().append('<p>'+ clock.secondUp() +'</p>');                     
                });                 
                $('#minute-up').click(function() {                     
                    $('#clock').empty().append('<p>'+ clock.minuteUp() +'</p>');                     
                });                 
                $('#hour-up').click(function() {                     
                    $('#clock').empty().append('<p>'+ clock.hourUp() +'</p>');                     
                });                 
            });             
        </script>
    </head>
    <body>
        <div id="clock"></div>
        <button id="second-up">Second up</button>
        <button id="minute-up">Minute up</button>
        <button id="hour-up">Hour up</button>
    </body>
</html>

No voy a extenderme explicando cómo funciona este ejemplo porque ya estás tú para pensar un poco 🙂

Te invito pues a que tomes este código y reflexiones sobre cómo está hecho. No debería plantear demasiados problemas porque, como decimos, es self-explanatory.