用Html5画了一个时间表

	.myClass{
		margin: 20px atuo;
		position:relative;
		width:800px;
		}
	#panel{
		border: 1px solid #CCC;}

	var thisObj = function(){
		this.canvas = document.getElementById("panel");	
		this.context = this.canvas.getContext("2d");
		this.hour = 1;
		this.minute = 29;
		this.second = 1;
	}
	
	var i;
	i = window.setInterval(function(){
		thisObj.context.clearRect(-200, -100, thisObj.canvas.width, thisObj.canvas.height);
		setObjValue();
		drawHour();
		drawHourFont();	
		drawMinute();
		drawCenter();
		drawClockwise();
		drawMinuteHand();
		drawSeconds();
		setAuthor();
	},10);
	
	function setObjValue(){
		if(thisObj.second == 60){
			thisObj.second = 1;
			thisObj.minute = thisObj.minute + 1;
		}
		if(thisObj.minute == 60){
			thisObj.minute = 1;
			thisObj.hour = thisObj.hour + 1;
		}
		thisObj.second = thisObj.second + 1;
	}
	
	function init(){		
		thisObj = new thisObj();
		thisObj.context.translate(200, 100);
	}
	
	//小时
	function drawHour(){
		thisObj.context.save();
		thisObj.context.strokeStyle = '#FF0000';
		thisObj.context.beginPath();//注意
		thisObj.context.arc(200, 100, 150, 0, Math.PI * 2, false);
		thisObj.context.stroke();
		thisObj.context.restore();
	}
	
	//设置字
	function drawHourFont(){
		saveAndRestore(function(){
			var j = 4;
			thisObj.context.lineWidth = 4;
			for(var i = 0; i < 12; i ++){
				thisObj.context.rotate(Math.PI / 6);
				thisObj.context.beginPath();
				thisObj.context.moveTo(140, 0);
				thisObj.context.lineTo(150, 0);
				thisObj.context.fillText(j+"点", 160, 0);
				j = (j == 12 ? 0: j);
				j++;
				thisObj.context.stroke();
			}
		});
	}
	
	//分钟
	function drawMinute(){
		saveAndRestore(function(){
			for(var i = 0; i < 60; i ++){
				if(i % 5 != 0){
					thisObj.context.beginPath();
					thisObj.context.moveTo(145, 0);
					thisObj.context.lineTo(150, 0);
					thisObj.context.stroke();
				}
				thisObj.context.rotate(Math.PI / 30);
			}	
		});
	}
	
	//圆心
	function drawCenter(){
		saveAndRestore(function(){
			thisObj.context.beginPath();
			//thisObj.context.fillStyle = '#0000FF';
			thisObj.context.arc(0,0, 10, 0, Math.PI * 2, false);
			thisObj.context.fill();
		});				
	}
	
	//时针
	function drawClockwise(){
		saveAndRestore(function(){
			thisObj.context.rotate(thisObj.hour * (Math.PI / 6));
			commHand(0);
		});
	}
	
	//分针
	function drawMinuteHand(){
		saveAndRestore(function(){
			thisObj.context.rotate(thisObj.minute * (Math.PI / 30));			
			commHand(-30);	
		});
	}
	
	//秒针
	function drawSeconds(){
		saveAndRestore(function(){
			thisObj.context.rotate(thisObj.second * (Math.PI / 30));
			commHand(-60);
		});
	}
	
	function commHand(i){
		thisObj.context.fillRect(-5, -2, 10, -60 + i);
		thisObj.context.fill();
		
		thisObj.context.lineJoin = 'round';
		thisObj.context.moveTo(-10, -61+ i);
		thisObj.context.lineTo(0, -70+ i);
		thisObj.context.lineTo(10, -61+ i);
		thisObj.context.lineTo(10, -61+ i);
		thisObj.context.lineTo(-10, -61+ i);
		thisObj.context.fill();	
	}
	
	function saveAndRestore(funCall){
		thisObj.context.save();
		thisObj.context.translate(200, 100);
		funCall();
		thisObj.context.restore();
	}
	
	function setAuthor(){
		saveAndRestore(function(){
			thisObj.context.font = '20px impact';
			thisObj.context.fontStyle = '#FF0000';
			thisObj.context.fillText('作者：王明', 260, 150);
			thisObj.context.fillText('2012年10月18日', 260, 180);
			thisObj.context.stroke();
		});
	}
	window.addEventListener("load", init, true);

    <div class="myClass">
    	<canvas id="panel" width="800" height="433" />
    </div>