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

Hello there! How’s it going? El artículo de hoy es la continuación del ejercicio anterior. Fíjate que a los controles que pusimos el otro día hoy añadimos un canvas HTML5, pintando un círculo y tres manillas.

Reloj despertador

Las manillas del reloj se pintan, de momento, “en cualquier lugar”, y no responden a los controles; el objetivo que perseguimos es presentar el canvas HTML5 mediante el ejemplo, learning by doing, ilustrando el funcionamiento de los métodos de pintado de círculos, líneas rectas, etc.

En el próximo capítulo ya haremos que el reloj responda a los controles, y también habrá espacio para las mejoras. Se sigue el paradigma de orientación a objetos de JavaScript, por cierto.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="public/js/jquery.js"></script>
        <style>             
            div#clock {
                width: 400px;
                height: 400px;
                margin: 0px auto            
            }             
            div#clock canvas#draw {
                border: 1px solid #cccccc;
                background: #fafafa     
            }             
        </style>
        <script>             
            // constructor             
            function Clock(canvas, date) {                 
                this.canvas = canvas;           
                this.context = canvas.getContext('2d');                 
                this.date = date;                 
                this.radius = 60;                 
                this.hoursLength = 30;
                this.minutesLength = 40;
                this.secondsLength = 50;                 
                this.x = canvas.width / 2;
                this.y = canvas.height / 2;                 
            }
             
            // drawing methods
             
            Clock.prototype.drawClock = function() {                 
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
                this.context.beginPath();
                this.context.arc(this.x, this.y, this.radius, 2 * Math.PI, 0, false);
                this.context.stroke();
                 
                return this;                 
            }
             
            Clock.prototype.drawSeconds = function() {                 
                this.context.beginPath();
                this.context.strokeStyle = '#cc0000';
                this.context.moveTo(this.x, this.y);
                this.context.lineTo(this.x, this.y + this.secondsLength);
                this.context.stroke();
                 
                return this;                 
            }
             
            Clock.prototype.drawMinutes = function() {                 
                this.context.beginPath();
                this.context.strokeStyle = '#0101df';
                this.context.moveTo(this.x, this.y);
                this.context.lineTo(this.x, this.y - this.minutesLength);
                this.context.stroke();
                 
                return this;                 
            }
             
            Clock.prototype.drawHours = function() {                 
                this.context.beginPath();
                this.context.strokeStyle = '#424242';
                this.context.moveTo(this.x, this.y);
                this.context.lineTo(this.x + this.hoursLength, this.y);
                this.context.stroke();
                 
                return this;                 
            }
             
            // control methods
             
            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;                 
            };

            // main program
             
            $(function() {                 
                date = new Date();                 
                clock = new Clock(document.getElementById('draw'), date);                 
                clock.drawClock().drawHours().drawMinutes().drawSeconds();                 
                $('div#clock #time').append('<p>'+ date +'</p>');                 
                $('#second-up').click(function() {                     
                    $('div#clock #time').empty().append('<p>'+ clock.secondUp() +'</p>');                     
                });                 
                $('#minute-up').click(function() {                     
                    $('div#clock #time').empty().append('<p>'+ clock.minuteUp() +'</p>');                     
                });                 
                $('#hour-up').click(function() {                     
                    $('div#clock #time').empty().append('<p>'+ clock.hourUp() +'</p>');                     
                });                 
            });             
        </script>
    </head>
    <body>
        <div id="clock">
            <canvas id="draw">Este navegador no soporta el canvas HTML5</canvas>
            <div id="time"></div>
            <div id="controls">
                <button id="second-up">Second up</button>
                <button id="minute-up">Minute up</button>
                <button id="hour-up">Hour up</button>
            </div>
        </div>
    </body>
</html>

He hecho este ejercicio bastante rápidamente, por lo que te agradeceré muchísimo que si encuentras alguna cosita que no está del todo bien me avises con un comentario.

¡Y esto es todo por hoy! ¡Hasta la próxima!