其实极地钟是一种很有特色的钟表，实现起来的逻辑也不是很复杂，国庆假期无聊，做了一个自己玩玩。

代码如下：

(function(){
	var tools = {
		Cav : document.getElementById('cav'),
		getCav : function() {
			return this.Cav.getContext("2d");
		},
		getNowDate : function () {
			var dateObj = new Date();
			return {
				'y' : dateObj.getFullYear(),
				'm' : dateObj.getMonth(),
				'd' : dateObj.getDate(),
				'h' : dateObj.getHours(),
				'min' : dateObj.getMinutes(),
				's' : dateObj.getSeconds(),
				'ms' : dateObj.getMilliseconds()
			};
		},
		toRad : function (angle) {
			return angle * Math.PI / 180;
		},
		countDay : function () {
			var d  = new Date();
			return new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
		},
		getCenter : function () {
			return [this.Cav.width / 2, this.Cav.height / 2];
		},
		getColor : function (per, s, e) {
			var S = s.split('');
			var E = e.split('');
			var result = [];
			for (var i = 0;i < 6;i+=2) {
				var startColor = parseInt(S[i]+''+S[i+1], 16);
				var endColor = parseInt(E[i]+''+E[i+1], 16);
				if (startColor == endColor) {
					result.push(startColor);
				} else if(startColor < endColor) {
					result.push(startColor + parseInt((endColor - startColor) * per));
				} else if(startColor > endColor) {
					result.push(startColor - parseInt((startColor - endColor) * per));
				}
			}
			return 'rgb('+result[0]+','+result[1]+','+result[2]+')';
		},
		canUseCanvas : function () {
			if (typeof(Worker) !== undefined)
				return true;
			else return false;
		}
	};
	var draw = {
		reflash : function (cav, width, height) {
			cav.clearRect(0, 0, width, height);
		},
		rect: function (cav, startPoint, size, bgColor) {
			cav.fillStyle = bgColor;
			cav.fillRect(startPoint[0], startPoint[1], size[0], size[1]);
		},
		arc : function (cav, Radius, Center, Angle, Width, Color) {
			cav.lineWidth = Width;
			cav.strokeStyle = Color;
			cav.beginPath();
			cav.arc(Center[0], Center[1], Radius, 1.5 * Math.PI, Angle, false);
			cav.stroke();
		},
		text : function (cav, text, startPoint, textStyle, color) {
			cav.fillStyle = color;
			cav.font = textStyle;
			cav.fillText(text, startPoint[0], startPoint[1])
		}
	};
	var main = function () {
		if (!tools.canUseCanvas()) {
			return;
		}
		var cavObj = tools.getCav();
		var now = tools.getNowDate();

		draw.reflash(cavObj, tools.Cav.width, tools.Cav.height);
		var monthDay = tools.countDay();

		//month
		draw.arc(cavObj, 290, tools.getCenter(), tools.toRad( (now['m'] / 12 + now['d'] / 12 / monthDay) * 360 - 90), 20, tools.getColor(now['m'] / 12 + now['d'] / 12 / monthDay,'028760','00a381'));
		draw.text(cavObj, (now['m']+1)+'月', [300, 18], '18px Arial', '#fff');
		//day
		draw.arc(cavObj, 265, tools.getCenter(), tools.toRad( (now['d'] / monthDay + now['h'] / 24 / monthDay) * 360 - 90), 20, tools.getColor(now['d'] / monthDay + now['h'] / 24 / monthDay,'a2d7dd', '83ccd2'));
		draw.text(cavObj, now['d']+'日', [300, 43], '18px Arial', '#fff');
		//hour
		draw.arc(cavObj, 240, tools.getCenter(), tools.toRad( (now['h'] / 24 + now['min'] / 1440) * 360 - 90), 20, tools.getColor(now['h'] / 24 + now['min'] / 1440, '1e50a2', '164a84'));
		draw.text(cavObj, now['h']+'时', [300, 68], '18px Arial', '#fff');
		//minute
		draw.arc(cavObj, 215, tools.getCenter(), tools.toRad( (now['min'] / 60 + now['s'] / 3600) * 360 - 90), 20, tools.getColor(now['min'] / 60 + now['s'] / 3600, '0095d9', '2792c3'));
		draw.text(cavObj, now['min']+'分', [300, 93], '18px Arial', '#fff');
		//second
		draw.arc(cavObj, 190, tools.getCenter(), tools.toRad( (now['s'] / 60 + now['ms'] / 60000) * 360 - 90), 20, tools.getColor(now['s'] / 60 + now['ms'] / 60000, '84a2d4', '89c3eb'));
		draw.text(cavObj, now['s']+'秒', [300, 118], '18px Arial', '#fff');

		draw.rect(cavObj, [100, 230] , [400, 150], 'rgba(255,255,255,0.5)');
		draw.text(cavObj, now['y']+'年'+(now['m']+1)+'月'+now['d']+'日'+now['h']+'时'+now['min']+'分'+now['s']+'秒', [110, 310], '30px Arial' ,'#000');
		setTimeout(main, 33);
	};
	main();
})();