canvas画布写时钟

<canvas width="1000" height="800" class="rotate"></canvas>
    <script>
    		var cav=document.getElementsByClassName("rotate")[0];
			var cgt=cav.getContext("2d");
           
			function fun(){
				//表盘
				var date=new Date();
				var hour=date.getHours();      //获取当前的小时
				var min=date.getMinutes();     //获取分针数
				var second=date.getSeconds();  //获取秒数
				console.log("当前小时为:"+hour+"当前的分针数:"+min+"当前秒数:"+second);
				
				cgt.clearRect(0,0,1000,800);      //清空画布
				//大圆
				cgt.beginPath();
				cgt.lineWidth=3;
				cgt.strokeStyle="black";
				cgt.arc(400,400,200,0,360,false);
				cgt.stroke();
				cgt.closePath();
				//圆心
				cgt.beginPath();
				cgt.lineWidth=3;
				cgt.fillStyle="black";
				cgt.arc(400,400,10,0,360,false);
				cgt.fill();
				cgt.closePath();
				
				//时刻度
				cgt.save();
				cgt.beginPath();
				cgt.translate(400,400);
				cgt.fillStyle="black";
				cgt.fillRect(180,-5,15,10);
				cgt.closePath();
				cgt.restore();
				
				for(var i=0;i<12;i++){
					cgt.save();
					cgt.beginPath();
					cgt.translate(400,400);
					cgt.rotate(Math.PI/6*i); 
					cgt.fillStyle="black";
					cgt.fillRect(180,-5,15,10);
					cgt.closePath();
					cgt.restore();
				}
				//分刻度
				cgt.save();
				cgt.beginPath();
				cgt.translate(400,400);
				cgt.fillStyle="black";
				cgt.fillRect(185,-2.5,10,5);
				cgt.closePath();
				cgt.restore();
				for(var i=0;i<60;i++){
					cgt.save();
					cgt.beginPath();
					cgt.translate(400,400);
					cgt.rotate(Math.PI/30*i);
					cgt.fillStyle="black";
					cgt.fillRect(185,-2.5,10,5);
					cgt.closePath();
					cgt.restore();
				}
				//时针
				cgt.save();//存储
				cgt.beginPath();
				cgt.translate(400,400);
				cgt.rotate(Math.PI/6*hour);         //旋转 
				cgt.fillStyle="black";
				cgt.fillRect(-5,-90,10,100);
				cgt.closePath();
				cgt.restore();
				//分针
				cgt.save();//存储
				cgt.beginPath();
				cgt.translate(400,400);
				 cgt.rotate(Math.PI/30*min);         //旋转 
				cgt.fillStyle="orange";
				cgt.fillRect(-3,-120,6,140);
				cgt.closePath();
				cgt.restore();
				//秒针
				cgt.save();//存储
				cgt.beginPath();
				cgt.translate(400,400);
				cgt.rotate(Math.PI/30*second);         //旋转
				cgt.fillStyle="red";
				cgt.fillRect(-2,-150,4,180);
				cgt.closePath();
				cgt.restore();
			}
			fun();
			setInterval(fun,1000);
    </script>

1、绘制画布的大小
2、获取画布对象
3、获取画布环境
5、获取时间
4、之后开始绘制图形