HTML5 canvas clock
Introduction
Not one that's made out of canvas. That would definitely be rather daft. This one uses the HTML5 canvas tag.
And yes I know there already is one a few, but ho-hum...
The one I've seen doesn't have numbers though - it was probably made when the was no text API on the canvas. This one, though, does. And you'll need to be using Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+.
Download
The library is here. And the HTML you need is as follows.
First include the library:
<script type="text/javascript" src="Clock.js"></script>
Then define your canvas tag:
<canvas id="myClock" width="300" height="300">[No canvas support]</canvas>And finally the Javascript:
<script type="text/javascript">
window.onload = function ()
{
var clock = new Clock('myClock');
// All these default to true anyway
clock.Set('clock.digital', true);
clock.Set('clock.numbers', true);
clock.Set('clock.background', true);
DrawClock = function ()
{
clock.Draw();
// The timer which redraws the clock ten times per second,
// (doing so helps prevent slight timing oddities)
setTimeout(DrawClock, 100);
}
DrawClock();
}
</script>
Configuration options
| clock.strokestyle | Controls the color that the clock is drawn in. Default: black |
clock.gutter | This is the clocks"margin" on the canvas. Default: 25 |
|---|---|---|---|
| clock.shadow | Whether the clock has a shadow or not. Default: true |
clock.numbers | Whether the numbers on the face of the clock are drawn. Default: true |
| clock.background | Whether to draw the circle and tickmarks. Default: true |
clock.digital | Whether the digital readout at the bottom of the clock are drawn. Default: true |
| clock.text.size | The size of the numbers on the clock face. Default: 12 |
clock.numbers.style | This can be either numbers, or lines and dictates how the lines are drawn. Default: numbers |
| clock.numbers.style.lines.linewidth | If you have lines as then numbers, smaller clocks will require a smaller line width. Default: 13 |
clock.centerpin | Whether the center-pin of the clock is drawn. Default: true |
| clock.hands.tails | This controls whether the clock hands have "tails". Default: true |
You can set these options by using the Set() method:
myClock.Set('clock.background', false);