hungrymedia/html5-canvas-clock-demo.html

## html5-canvas-clock-demo.html
<html>
<head>
<title>HTML5/canvas clock</title>
<style>
body{
	margin: 0;
	background: #030;
}
canvas p{
	text-align: center;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
}
</style>
<script type="text/javascript">

var timeAngle = 0;

var canvas;
var ctx;
var t;
var secondsColor = 'rgba( 0, 100, 0, 0.8 )';
var minutesColor = 'rgba( 0, 150, 0, 0.55 )';
var hoursColor = 'rgba( 0, 200, 0, 0.3 )';
var currentHr;
var currentMin;
var currentSec;
var currentMillisec;

function setup(){
	canvas = document.getElementById('tutorial');
	if (canvas.getContext){
		ctx = canvas.getContext('2d');
	}
	t = setInterval( 'updateTime()', 50 );
}

function updateTime(){
	var currentDate = new Date();
	var radgrad = ctx.createRadialGradient(250,250,1,250,250,250);
  radgrad.addColorStop(0, '#006600');
  radgrad.addColorStop(1, '#003300');
	ctx.fillStyle = radgrad;
	ctx.fillRect( 0, 0, canvas.width, canvas.height );
	currentSec = currentDate.getSeconds();
	currentMillisec = currentDate.getMilliseconds();
	currentMin = currentDate.getMinutes();
	currentHr = currentDate.getHours();
	if( currentHr > 12 ){
		currentHr -= 12;
	}
	drawSeconds();
	drawMinutes();
	drawHours();
	var humanTime = currentHr + ':' + zeroPad( currentMin ) + ':' + zeroPad( currentSec );
	var textPosX = 250 - ( ctx.measureText( humanTime ).width / 2 );
	ctx.fillStyle = 'rgba( 255, 255, 255, 0.2)';
	ctx.font = "50px arial";
	ctx.fillText( humanTime, textPosX, 265 );
}

function drawSeconds(){
	timeAngle = 0.006 * ( ( currentSec * 1000 ) + currentMillisec );
	ctx.fillStyle = secondsColor;
	ctx.beginPath();
	ctx.moveTo( 250, 250 );
	ctx.lineTo( 250, 50 );
	ctx.arc( 250, 250, 200, calcDeg( 0 ), calcDeg( timeAngle ), false );
	ctx.lineTo( 250, 250 );
	ctx.fill();
}

function drawMinutes(){
	timeAngle = 0.0001 * ( ( currentMin * 60 * 1000 ) + ( currentSec * 1000 ) + currentMillisec );
	ctx.fillStyle = minutesColor;
	ctx.beginPath();
	ctx.moveTo( 250, 250 );
	ctx.lineTo( 250, 100 );
	ctx.arc( 250, 250, 150, calcDeg( 0 ), calcDeg( timeAngle ), false );
	ctx.lineTo( 250, 250 );
	ctx.fill();
}

function drawHours(){
	timeAngle = 0.000008333333333 * ( ( currentHr * 12 * 60 * 1000 ) + ( currentMin * 60 * 1000 ) + ( currentSec * 1000 ) + currentMillisec );
	ctx.fillStyle = hoursColor;
	ctx.beginPath();
	ctx.moveTo( 250, 250 );
	ctx.lineTo( 250, 150 );
	ctx.arc( 250, 250, 100, calcDeg( 0 ), calcDeg( timeAngle ), false );
	ctx.lineTo( 250, 250 );
	ctx.fill();
}


function calcDeg( deg ){
	return (Math.PI/180) * (deg - 90);
}
function zeroPad( str ){
	var cStr = str.toString();
	if( cStr.length < 2 ){
		 str = 0 + cStr;
	}
	return str;
}
</script>
<style type="text/css">
canvas {
	border: 1px solid black;
}
</style>
</head>
<body onload="setup();">
<canvas id="tutorial" width="500" height="500"><p>Your browser does not support the canvas element</p></canvas>
</body>
</html>
	<html>
	<head>
	<title>HTML5/canvas clock</title>
	<style>
	body{
	margin: 0;
	background: #030;
	}
	canvas p{
	text-align: center;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	}
	</style>
	<script type="text/javascript">

	var timeAngle = 0;

	var canvas;
	var ctx;
	var t;
	var secondsColor = 'rgba( 0, 100, 0, 0.8 )';
	var minutesColor = 'rgba( 0, 150, 0, 0.55 )';
	var hoursColor = 'rgba( 0, 200, 0, 0.3 )';
	var currentHr;
	var currentMin;
	var currentSec;
	var currentMillisec;

	function setup(){
	canvas = document.getElementById('tutorial');
	if (canvas.getContext){
	ctx = canvas.getContext('2d');
	}
	t = setInterval( 'updateTime()', 50 );
	}

	function updateTime(){
	var currentDate = new Date();
	var radgrad = ctx.createRadialGradient(250,250,1,250,250,250);
	radgrad.addColorStop(0, '#006600');
	radgrad.addColorStop(1, '#003300');
	ctx.fillStyle = radgrad;
	ctx.fillRect( 0, 0, canvas.width, canvas.height );
	currentSec = currentDate.getSeconds();
	currentMillisec = currentDate.getMilliseconds();
	currentMin = currentDate.getMinutes();
	currentHr = currentDate.getHours();
	if( currentHr > 12 ){
	currentHr -= 12;
	}
	drawSeconds();
	drawMinutes();
	drawHours();
	var humanTime = currentHr + ':' + zeroPad( currentMin ) + ':' + zeroPad( currentSec );
	var textPosX = 250 - ( ctx.measureText( humanTime ).width / 2 );
	ctx.fillStyle = 'rgba( 255, 255, 255, 0.2)';
	ctx.font = "50px arial";
	ctx.fillText( humanTime, textPosX, 265 );
	}

	function drawSeconds(){
	timeAngle = 0.006 * ( ( currentSec * 1000 ) + currentMillisec );
	ctx.fillStyle = secondsColor;
	ctx.beginPath();
	ctx.moveTo( 250, 250 );
	ctx.lineTo( 250, 50 );
	ctx.arc( 250, 250, 200, calcDeg( 0 ), calcDeg( timeAngle ), false );
	ctx.lineTo( 250, 250 );
	ctx.fill();
	}

	function drawMinutes(){
	timeAngle = 0.0001 * ( ( currentMin * 60 * 1000 ) + ( currentSec * 1000 ) + currentMillisec );
	ctx.fillStyle = minutesColor;
	ctx.beginPath();
	ctx.moveTo( 250, 250 );
	ctx.lineTo( 250, 100 );
	ctx.arc( 250, 250, 150, calcDeg( 0 ), calcDeg( timeAngle ), false );
	ctx.lineTo( 250, 250 );
	ctx.fill();
	}

	function drawHours(){
	timeAngle = 0.000008333333333 * ( ( currentHr * 12 * 60 * 1000 ) + ( currentMin * 60 * 1000 ) + ( currentSec * 1000 ) + currentMillisec );
	ctx.fillStyle = hoursColor;
	ctx.beginPath();
	ctx.moveTo( 250, 250 );
	ctx.lineTo( 250, 150 );
	ctx.arc( 250, 250, 100, calcDeg( 0 ), calcDeg( timeAngle ), false );
	ctx.lineTo( 250, 250 );
	ctx.fill();
	}


	function calcDeg( deg ){
	return (Math.PI/180) * (deg - 90);
	}
	function zeroPad( str ){
	var cStr = str.toString();
	if( cStr.length < 2 ){
	str = 0 + cStr;
	}
	return str;
	}
	</script>
	<style type="text/css">
	canvas {
	border: 1px solid black;
	}
	</style>
	</head>
	<body onload="setup();">
	<canvas id="tutorial" width="500" height="500"><p>Your browser does not support the canvas element</p></canvas>
	</body>
	</html>