³ÉÈË¿ìÊÖ ³ÉÈË¿ìÊÖpage: Clock
Good news! The has returned to the ³ÉÈË¿ìÊÖ ³ÉÈË¿ìÊÖpage.
When we launched the 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 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
this.context.save(); // 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 and continues to live on in new technologies.
