ZiTAL/canvas clock

## canvas clock
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>w3cschools</title>
<script type="text/javascript">
(function()
{
	"use strict";

	var clock = function(config)
	{
		var _ctx;
		var _radius;
		var _config;
		var _span;

		var __construct = function(config)
		{
			_config = config;

			var canvas = document.createElement('canvas');
			canvas.setAttribute('width', '500');
			canvas.setAttribute('height', '500');
			canvas.style.backgroundColor = '#333333';
			document.getElementsByTagName('body')[0].appendChild(canvas);

			_span = document.createElement('span');
			document.getElementsByTagName('body')[0].appendChild(_span);

			_ctx = canvas.getContext("2d");

			_radius = canvas.height / 2;
			_ctx.translate(_radius, _radius);

			_radius = _radius * 0.95;
			_draw();
			_loop();
		};

		var _draw = function()
		{
			// borobil zuria marraztu
		    _ctx.arc(0, 0, _radius, 0 , 2*Math.PI);
		    _ctx.fillStyle = "#ffffff";
		    _ctx.fill();

			_drawNumbers();
			var t = _getTime();

			if(_span.hasChildNodes())
				_span.removeChild(_span.firstChild);
			_span.appendChild(document.createTextNode(t['h']+":"+t['m']+":"+t['s']));

			_drawElements('s', t);
			_drawElements('m', t);
			_drawElements('h', t);
		};

		var _drawNumbers = function()
		{
			var ang;
			_ctx.font = _radius*0.15 + "px arial";
			_ctx.fillStyle = "#000000";
			_ctx.textBaseline="middle";
			_ctx.textAlign="center";

			// orduak
			for(var num = 1; num < 13; num++)
			{
				ang = num * Math.PI / 6;
				_ctx.rotate(ang);
				_ctx.translate(0, -_radius*0.65);
				_ctx.rotate(-ang);
				_ctx.fillText(num.toString(), 0, 0);
				_ctx.rotate(ang);
				_ctx.translate(0, _radius*0.65);
				_ctx.rotate(-ang);
			}

			_ctx.font = _radius*0.05 + "px arial";

			// minutuak / segunduak
			for(var num = 0; num < 60; num++)
			{
				ang = num * Math.PI / 30;
				_ctx.rotate(ang);
				_ctx.translate(0, -_radius*0.87);
				_ctx.rotate(-ang);
				_ctx.fillText(num.toString(), 0, 0);
				_ctx.rotate(ang);
				_ctx.translate(0, _radius*0.87);
				_ctx.rotate(-ang);
			}
		};

		var _getTime = function()
		{
			var now = new Date();
			var t =
			{
				'h': now.getHours()%12,
				'm': now.getMinutes(),
				's': now.getSeconds(),
				'ms': Number.parseFloat("0."+now.getMilliseconds().toString().match(/[0-9]{3}/))
				//'ms': 0.000
			};
			return t;
		};

		var _drawElements = function(type, t)
		{
			var ang = _getAng(t, type);
			var percent = _config[type]['percent'];
			var size = _config[type]['size'];
			var color = _config[type]['color'];

			_drawElement(ang, percent, size, color);
		};

		var _getAng = function(t, type)
		{
			var ang;
			var tmp;
			if(type==='s')
			{
				if(_config['s']['animate'])
					tmp = t['s'] + t['ms'];
				else
					tmp = t['s'];

				ang = tmp * Math.PI / 30;
			}
			else if(type==='m')
			{
				if(_config['m']['animate'])
					tmp = t['s'];
				else
					tmp = 1;

				ang = (t['m']*Math.PI/30)+(tmp*Math.PI/(30*60));
			}

			else if(type==='h')
			{
				if(_config['h']['animate'])
					ang = (t['h']*Math.PI/6)+(t['m']*Math.PI/(6*60))+(t['s']*Math.PI/(360*60));
				else
					ang = t['h'] * Math.PI / 6;
			}

			return ang;
		}

		var _drawElement = function(ang, percent, size, color)
		{
			_ctx.beginPath();

			_ctx.rotate(ang);
			_ctx.translate(0, -_radius*percent);
			_ctx.rotate(-ang);

			_ctx.arc(0, 0, _radius*size, 0, 2*Math.PI);
			_ctx.fillStyle = color;
			_ctx.fill();

			_ctx.rotate(ang);
			_ctx.translate(0, _radius*percent);
			_ctx.rotate(-ang);
		};

		var _loop = function()
		{
			window.setTimeout(function()
			{
				_draw();
				_loop();
			}, 75);
		};

		__construct(config);
	};

	window['clock'] = clock;
})();
window.onload = function()
{
	new clock(
	{
		"s":
		{
			percent: 0.95,
			size: 0.02,
			color: 'blue',
			animate: true
		},
		"m":
		{
			percent: 0.75,
			size: 0.03,
			color: 'red',
			animate: true
		},
		"h":
		{
			percent: 0.50,
			size: 0.04,
			color: 'green',
			animate: true
		}
	});
};
</script>
</head>
<body>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>w3cschools</title>
	<script type="text/javascript">
	(function()
	{
	"use strict";

	var clock = function(config)
	{
	var _ctx;
	var _radius;
	var _config;
	var _span;

	var __construct = function(config)
	{
	_config = config;

	var canvas = document.createElement('canvas');
	canvas.setAttribute('width', '500');
	canvas.setAttribute('height', '500');
	canvas.style.backgroundColor = '#333333';
	document.getElementsByTagName('body')[0].appendChild(canvas);

	_span = document.createElement('span');
	document.getElementsByTagName('body')[0].appendChild(_span);

	_ctx = canvas.getContext("2d");

	_radius = canvas.height / 2;
	_ctx.translate(_radius, _radius);

	_radius = _radius * 0.95;
	_draw();
	_loop();
	};

	var _draw = function()
	{
	// borobil zuria marraztu
	_ctx.arc(0, 0, _radius, 0 , 2*Math.PI);
	_ctx.fillStyle = "#ffffff";
	_ctx.fill();

	_drawNumbers();
	var t = _getTime();

	if(_span.hasChildNodes())
	_span.removeChild(_span.firstChild);
	_span.appendChild(document.createTextNode(t['h']+":"+t['m']+":"+t['s']));

	_drawElements('s', t);
	_drawElements('m', t);
	_drawElements('h', t);
	};

	var _drawNumbers = function()
	{
	var ang;
	_ctx.font = _radius*0.15 + "px arial";
	_ctx.fillStyle = "#000000";
	_ctx.textBaseline="middle";
	_ctx.textAlign="center";

	// orduak
	for(var num = 1; num < 13; num++)
	{
	ang = num * Math.PI / 6;
	_ctx.rotate(ang);
	_ctx.translate(0, -_radius*0.65);
	_ctx.rotate(-ang);
	_ctx.fillText(num.toString(), 0, 0);
	_ctx.rotate(ang);
	_ctx.translate(0, _radius*0.65);
	_ctx.rotate(-ang);
	}

	_ctx.font = _radius*0.05 + "px arial";

	// minutuak / segunduak
	for(var num = 0; num < 60; num++)
	{
	ang = num * Math.PI / 30;
	_ctx.rotate(ang);
	_ctx.translate(0, -_radius*0.87);
	_ctx.rotate(-ang);
	_ctx.fillText(num.toString(), 0, 0);
	_ctx.rotate(ang);
	_ctx.translate(0, _radius*0.87);
	_ctx.rotate(-ang);
	}
	};

	var _getTime = function()
	{
	var now = new Date();
	var t =
	{
	'h': now.getHours()%12,
	'm': now.getMinutes(),
	's': now.getSeconds(),
	'ms': Number.parseFloat("0."+now.getMilliseconds().toString().match(/[0-9]{3}/))
	//'ms': 0.000
	};
	return t;
	};

	var _drawElements = function(type, t)
	{
	var ang = _getAng(t, type);
	var percent = _config[type]['percent'];
	var size = _config[type]['size'];
	var color = _config[type]['color'];

	_drawElement(ang, percent, size, color);
	};

	var _getAng = function(t, type)
	{
	var ang;
	var tmp;
	if(type==='s')
	{
	if(_config['s']['animate'])
	tmp = t['s'] + t['ms'];
	else
	tmp = t['s'];

	ang = tmp * Math.PI / 30;
	}
	else if(type==='m')
	{
	if(_config['m']['animate'])
	tmp = t['s'];
	else
	tmp = 1;

	ang = (t['m']Math.PI/30)+(tmpMath.PI/(30*60));
	}

	else if(type==='h')
	{
	if(_config['h']['animate'])
	ang = (t['h']Math.PI/6)+(t['m']Math.PI/(660))+(t['s']Math.PI/(360*60));
	else
	ang = t['h'] * Math.PI / 6;
	}

	return ang;
	}

	var _drawElement = function(ang, percent, size, color)
	{
	_ctx.beginPath();

	_ctx.rotate(ang);
	_ctx.translate(0, -_radius*percent);
	_ctx.rotate(-ang);

	_ctx.arc(0, 0, _radiussize, 0, 2Math.PI);
	_ctx.fillStyle = color;
	_ctx.fill();

	_ctx.rotate(ang);
	_ctx.translate(0, _radius*percent);
	_ctx.rotate(-ang);
	};

	var _loop = function()
	{
	window.setTimeout(function()
	{
	_draw();
	_loop();
	}, 75);
	};

	__construct(config);
	};

	window['clock'] = clock;
	})();
	window.onload = function()
	{
	new clock(
	{
	"s":
	{
	percent: 0.95,
	size: 0.02,
	color: 'blue',
	animate: true
	},
	"m":
	{
	percent: 0.75,
	size: 0.03,
	color: 'red',
	animate: true
	},
	"h":
	{
	percent: 0.50,
	size: 0.04,
	color: 'green',
	animate: true
	}
	});
	};
	</script>
	</head>
	<body>
	</body>
	</html>