Code
<canvas id="canvas" height="200" width="400" style="background: rgba(0,0,0,0.8);"></canvas>
<script type="text/javascript">
var c = new cajal('canvas',{loopFps: 10});
var thetime = function (){
var date = new Date();
var ret = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
ret += ':';
ret += date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();;
ret += ':';
ret += date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();;
return ret;
};
var animHour = function (f,t) {
c.get('h').p.angle += cajal.Ease.expInOut(30,f,t,2);
if (f===t) {
var date = new Date();
c.get('h').p.angle = 30 * date.getHours();
var ap = 'AM';
if (date.getHours() >= 12) {
ap = 'PM';
}
c.get('ap').text(ap);
}
}
var animMin = function (f,t) {
c.get('min').p.angle += cajal.Ease.expInOut(6,f,t,2);
if (f===t) {
var date = new Date();
c.get('min').p.angle = 6 * date.getMinutes();
if (c.get('min').p.angle === 0) {
this.animate(animHour,'2s');
}
}
}
var animSec = function (f,t) {
c.get('sec').p.angle += 6/c.options.loopFps;
if (Math.floor(c.get('sec').p.angle%360) === 0) {
var date = new Date();
c.get('sec').p.angle = 6 * date.getSeconds();
this.animate(animMin,'2s');
}
c.get('time').text(thetime());
}
var init = function () {
var center = {
x: c.canvas.width/2,
y: c.canvas.height/2
}
var date = new Date();
var drawOptions = {
width: 2,
stroke:'rgba(255,255,255,0.7)',
shadow: 'rgba(255,255,255,0.5)',
shadowBlur: 3
};
var sec = new cajal.Segment(center.x, center.y, 29, 6 * date.getSeconds()).options(drawOptions).rotate(-90).scale(0.6,3);
var min = new cajal.Segment(center.x, center.y, 22, 6 * date.getMinutes()).options(drawOptions).rotate(-90).scale(0.6,3);
var h = new cajal.Segment(center.x, center.y, 15, 30 * date.getHours()).options(drawOptions).rotate(-90).scale(0.6,3);
var ap = 'AM';
if (date.getHours() >= 12) {
ap = 'PM';
}
var text = new cajal.Text(center.x-7, center.y+3, ap).options({
font: 'bold 10px "Hevetica Neue", Helvetica, Arial, sans-serif',
textAlign: 'center',
fill: 'rgba(255,255,255,0.5)',
shadow: 'rgba(255,255,255,0.3)',
shadowBlur: 3
});
var time = new cajal.Text(center.x-50, center.y+50, thetime()).options({
font: 'bold 25px "Hevetica Neue", Helvetica, Arial, sans-serif',
textAlign: 'center',
fill: 'rgba(0,0,0,0.7)',
shadow: 'rgba(255,255,255,0.5)',
shadowBlur: 3
});
c.add('sec',sec).add('min',min).add('h',h).add('ap',text).add('time',time);
}
init();
c.animate(animSec);
</script>