1 (изменено: Arigato, 2013-10-20 20:45:37)

Тема: JS: Цифровые часы (HTML5)

Отрисовывает цифровые часы по размерам канвы. Имеется возможность менять некоторые настройки (цвета и прочее).

http://s020.radikal.ru/i723/1310/a3/3cfbe8e35891.png

Код скрипта:

/*

    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();
    }
    
};

Готовый пример в аттаче.

Post's attachments

DigitalClock.zip 10.04 kb, 19 downloads since 2013-10-20 

You don't have the permssions to download the attachments of this post.

2

Re: JS: Цифровые часы (HTML5)

Canvas вообще-то довольно мощная штука, но не без недостатков: написать код без бутылки, а то и двух порой довольно сложно, если речь заходит о коде оптимизированном и компактном. Тем паче, что HTML5 крашен не только canvas, но и другими вещами, скажем, svg, который в купе с javascript делает код гораздо проще и читабельней. Помнится писал я про аналоговые часы (см. здесь), после - цифровые. В обоих случаях svg сводит к минимуму написание кода на javascript.

3 (изменено: dab00, 2013-10-20 17:21:57)

Re: JS: Цифровые часы (HTML5)

Есть же js-фреймворки, использование которых может сократить количество "бутылок", например  KineticJS, Three.js (этот не пробовал - слишком для меня) и пр.

4

Re: JS: Цифровые часы (HTML5)

greg zakharov пишет:

Помнится писал я про аналоговые часы.

В FF наблюдаются проблемы со сглаживанием секундной стрелки.

5

Re: JS: Цифровые часы (HTML5)

dab00 пишет:

Есть же js-фреймворки...

Да полно! ВотЪ только смысл брать за основу чужие ошибки и на них возводить что-то? Понимаю, если время не терпит и заказчик некого проекта грозит словами непечатными, тогда шиш с ним. Так что Arigato больше заслуживает похвалы за проделанный труд.

Arigato пишет:

В FF наблюдаются проблемы со сглаживанием секундной стрелки.

FF довольно капризный интернет обозреватель.

6 (изменено: dab00, 2013-10-21 21:08:32)

Re: JS: Цифровые часы (HTML5)

off: Коммерсы считают денежки, а "оптимизировано" вы решили или "компактно" - им параллельно (кто не смотрел - рекомендую - не пожалеете ).
Работали иначе? Повезло, мне не случалось.
Не вижу ничего предосудительного в том, чтобы использовать фреймворки и прочие полуфабрикаты, сокращает: количество "бутылок", времени, "непечатных слов" и т.п.
По запросу в Google понравились варианты часов (и не только) здесь. По-моему классная подборка.
Всем мир .

7

Re: JS: Цифровые часы (HTML5)

Еще одна ссылка по теме - JavaScript библиотека SVG.

8

Re: JS: Цифровые часы (HTML5)

А как прозрачный фон сделать для этих часов ( DigitalClock ) ?

9

Re: JS: Цифровые часы (HTML5)

ufopera

    backColor: 'transparent', // цвет фона
Забыл пароль и потерял e-mail.