Archives for April 2010

BBC Homepage: Clock

Profile picture for Claire Roberts Claire Roberts

Post categories:

15:40 UK time, Thursday, 29 April 2010

Comments (9)

Good news! The clock has returned to the BBC Homepage.

When we launched the Beta Homepage we received feedback from a number of you who missed the clock, so we've turned it into a module allowing you to position the clock where you want it on the page (or shrink it or remove it altogether). It continues as before to show your computer's local time and date.


As part of moving the clock to its own module, it now makes use of upcoming HTML standards. Flash is no longer a necessity as the module uses HTML5 Canvas to draw and animate the clock face. This means users of newer browsers (and iPhones) will see the clock ticking on the page even if they don't have Flash. Of course, if you're using an older browser the Flash version will continue to load as usual.

If you're interested in how our Canvas code works, here's a snippet showing how to draw the clock face:

drawDisplay: function(pos){
    this.context.clearRect(0,0,49,49); // clear canvas; // save state before translation
    this.context.translate(24.5, 24.5); // move 0,0 to center
    this.context.strokeStyle = "#fff";
    for (var i = 0; i<12 ; i++){ // draw numerals
        var lineWidth = 1.2+(i*0.1), rotation = 30*(i+1),
            startX1 = -0.5 - lineWidth/2,
            startX2 = 0.5 + lineWidth/2,
            startY = -26, endY = -18;
        this.drawLine(lineWidth, rotation, startX1, startY, startX1, endY);
        this.drawLine(lineWidth, rotation, startX2, startY, startX2, endY);
    this.drawCircle(2, 0, 0, 5, 0, Math.PI*2, true); // draw centre circle
    this.drawLine(3, pos.hrsPos, 0, -6, 0, -17); // draw hour hand
    this.drawLine(2, pos.minPos, 0, -6, 0, -24); //draw minute hand
    this.drawLine(1, pos.secPos, 0, -6, 0, -26); //draw second hand
    this.drawLine(1, pos.secPos, 0, 5, 0, 10);	
    this.context.restore(); // go back to the state before translation
    this.drawnPos = pos;

The display is then redrawn every second to move the hands to the current time using Glow Animations.

The clock has come a long way since it first appeared in our idents and continues to live on in new technologies.

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.