Canvas Polar Clock
Date : 2008 02 26 Category : Tech & Development
Ajaxian
"agrath" has developed a very nice Canvas example using Prototype that makes use of a common Prototype-isms: Object.extend, Class.create, bind, enumerables, $w, $.
The Polar Clock is a different visualization of time and the example walks through all of the work required to implement it using Prototype 1.6.0.2 and Canvas, including the draw method:
PLAIN TEXT JAVASCRIPT:draw:function(){
this.clearCanvas();
var w = 20;
var r = 260;
this.date = new Date();
var cr = r;
$('labels').update()
$w("month day weekday space hour min second").reverse().each(function(interval){
cr = cr - w - w/2;
if(interval != 'space')
{
var ir = this.intervalToDegrees[interval].bind(this.date)();
var i = ((ir / 360) * 255) + 147;
var color = this.cc.rgbToCss(this.cc.hslToRgb(i.wrap(0,255),205,127));
this.drawSolidArc(color, cr, w, ir.toRadians());
$('labels').insert(this.getIntervalLabel[interval].bind(this.date)() + '<br />');
}
}.bind(this));
},
The article walks through a lot of Canvas as well as the Prototype side of things. Very thorough.