backColor: 'transparent', // цвет фона

/*

    Copyright 2013 Arigato Software

    Скрипт цифровых часов на Canvas
    
    Взято с http://programmersforum.ru/showthread.php?t=245008

*/

var DigitalClock = {
    
    // Параметры часов
    backColor: '#000', // цвет фона
    darkColor: '#010', // цвет выключенного элемента
    lightColor: '#0F0', // цвет включенного элемента
    lineWidth: 24, // толщина линий
    lineLength: 100, // длина линий
    
    /*
         -     0
        | |   1 2
         -     3
        | |   4 5
         -     6
    */
    digits: [
        [1,1,1,0,1,1,1], // 0
        [0,0,1,0,0,1,0], // 1
        [1,0,1,1,1,0,1], // 2
        [1,0,1,1,0,1,1], // 3
        [0,1,1,1,0,1,0], // 4
        [1,1,0,1,0,1,1], // 5
        [1,1,0,1,1,1,1], // 6
        [1,0,1,0,0,1,0], // 7
        [1,1,1,1,1,1,1], // 8
        [1,1,1,1,0,1,1]  // 9
    ],
    
    // Запуск часов
    start: function(canvasId) {
        var canvas = document.getElementById(canvasId);
        if ( canvas.getContext ) {
            var context = canvas.getContext('2d');
            this.context = context;
            var xScale = canvas.width / this.offset(18, 4);
            var yScale = canvas.height / this.offset(4, 2);
            context.scale(xScale, yScale);
            this.tick();
            setInterval(function(){DigitalClock.tick()}, 1000);
        }
    },
    
    // Получить цвет элемента
    getColor: function(bool) {
        return ( bool ) ? this.lightColor : this.darkColor;
    },
    
    // Рассчитать смещение элемента
    offset: function(countWidth, countLength) {
        return countWidth * this.lineWidth + countLength * this.lineLength;
    },
    
    // Отображение цифры на канве
    drawDigit: function(x, y, digit) {
        var ctx = this.context;
        
        ctx.save();
        ctx.translate(x, y);
        ctx.lineWidth = this.lineWidth;
        ctx.lineCap = 'round';
        
        // рисуем горизонтальные линии
        for (var i = 0; i < 3; i++) {
            var y = i * this.offset(1, 1);
            ctx.beginPath();
            ctx.strokeStyle = this.getColor(this.digits[digit][i*3]);
            ctx.moveTo(this.offset(1, 0), y);
            ctx.lineTo(this.offset(0, 1), y);
            ctx.stroke();
        }
        
        // рисуем вертикальные линии
        for (var j = 0; j < 2; j++) {
            var y = j * this.offset(1, 1);
            for (var i = 0; i < 2; i++) {
                var x = i * this.offset(1, 1);
                ctx.beginPath();
                ctx.strokeStyle = this.getColor(this.digits[digit][1+j*3+i]);
                ctx.moveTo(x, y + this.offset(1, 0));
                ctx.lineTo(x, y + this.offset(0, 1));
                ctx.stroke();
            }
        }
        
        ctx.restore();
    },
    
    // Отображение числа на канве
    drawNumber: function(x, y, number, digits) {
        x += this.offset(4, 1) * (digits - 1);
        for ( ; digits--; ) {
            this.drawDigit(x, y, number % 10);
            number = Math.floor(number / 10);
            x -= this.offset(4, 1);
        }
    },
    
    // Отрисовка часов
    tick: function() {
        // получаем текущее время
        var now = new Date();
        var hr = now.getHours();
        var mn = now.getMinutes();
        var sc = now.getSeconds();
        
        // выводим на канву
        this.context.fillStyle = this.backColor;
        this.context.fillRect(0, 0, this.offset(18, 4), this.offset(4, 2));
        this.drawNumber(this.offset(1, 0), this.offset(1, 0), hr, 2);
        this.drawNumber(this.offset(12, 2), this.offset(1, 0), mn, 2);
        
        // рисуем точки
        this.context.beginPath();
        this.context.arc(this.offset(9, 2), this.offset(1.5, 0.5), this.lineWidth, 0, 2 * Math.PI, true);
        this.context.arc(this.offset(9, 2), this.offset(2.5, 1.5), this.lineWidth, 0, 2 * Math.PI, true);
        this.context.fillStyle = this.getColor(sc % 2);
        this.context.strokeStyle = this.backColor;
        this.context.lineWidth = 1;
        this.context.fill();
        this.context.stroke();
    }
    
};