2017 May 20 JavaScript
JavaScript-Html-绘制时钟

使用Html控件canvas，利用JavaScript绘制时钟
效果图如下：
<!DOCTYPE html>
<html>
	<body>
		<canvas id="canvas" width="500" height="500" style="border:4px solid #00f;"/>
		<script>
			var canvas = document.getElementById("canvas");
			var context = canvas.getContext("2d");
					
			function drawClock(){
				// 清空画布(如不清空,之前画的指针会留下来)
				context.clearRect(0,0,500,500);
				
				var date = new Date();
				var sec = date.getSeconds();
				var min = date.getMinutes();
				var hours = date.getHours();
				hours = (hours+min/60)>12 ? hours-12 : hours;
				
				// 1.画外圆————————————————————————————————————————————
				context.beginPath();
				context.arc(250,250,200,0,360,false);			
				context.lineWidth = 10;
				context.strokeStyle = "#000";
				context.stroke();
				context.closePath();
				
				// 2.画时刻度————————————————————————————————————————————			
				for(var i=0;i<12;i++){
					// 旋转画布
					context.save();
					context.translate(250,250);
					context.rotate(i*30*Math.PI/180);
					// 画刻度线段
					context.beginPath();					
					context.moveTo(0,-170);
					context.lineTo(0,-190);
					context.lineWidth = 8;
					context.strokeStyle = "#f00";					
					context.stroke();
					context.closePath();
					// 恢复画布
					context.restore();
				}
				
				// 3.画分钟刻度————————————————————————————————————————————
				for(var i=0;i<60;i++){
					if(i%5==0)continue;
					// 旋转画布
					context.save();
					context.translate(250,250);
					context.rotate(i*6*Math.PI/180);
					// 画刻度线段
					context.beginPath();
					context.moveTo(0,-180);
					context.lineTo(0,-190);
					context.lineWidth = 6;
					context.strokeStyle = "#00f";
					context.stroke();
					context.closePath();
					// 恢复画布
					context.restore();
				}
				
				// 4.画小时指针————————————————————————————————————————————
				context.save();
				context.translate(250,250);
				context.rotate(hours*30*Math.PI/180);	
				// 画指针线段
				context.beginPath();
				context.moveTo(0,-120);
				context.lineTo(0,12);
				context.lineWidth = 8;
				context.strokeStyle = "#f00";
				context.stroke();
				context.closePath();
				// 恢复画布
				context.restore();
				
				// 5.画分钟指针————————————————————————————————————————————
				context.save();
				context.translate(250,250);
				context.rotate(min*6*Math.PI/180);
				// 画指针线段
				context.beginPath();
				context.moveTo(0,-160);
				context.lineTo(0,16);
				context.lineWidth = 6;
				context.strokeStyle = "#000";
				context.stroke();
				context.closePath();
				// 恢复画布				
				context.restore();
				
				// 5.画秒指针————————————————————————————————————————————
				context.save();
				context.translate(250,250);
				context.rotate(sec*6*Math.PI/180);
				// 画指针线段
				context.beginPath();
				context.moveTo(0,-175);
				context.lineTo(0,20);
				context.lineWidth = 2;
				context.strokeStyle = "#00f";
				context.stroke();
				context.closePath();
				// 恢复画布
				context.restore();
				
				// 6.画圆心————————————————————————————————————————————
				context.beginPath();			
				context.arc(250,250,6,0,360,false);
				context.fillStyle = "#f00";
				context.fill();	
				context.lineWidth = 4;
				context.strokeStyle = "#00f";
				context.stroke();
				context.closePath();
			}
			// 定时每秒画一次钟
			setInterval(drawClock,1000);
		</script>
	</body>
</html>
简书: http://www.jianshu.com/p/8f19aaf4d119
CSDN博客: http://blog.csdn.net/qq_32115439/article/details/72582771
GitHub博客：http://lioil.win/2017/05/20/JS_Html_Clock.html
Coding博客：http://c.lioil.win/2017/05/20/JS_Html_Clock.html