Html5学习-canvas编纂简单钟表 _HTML/CSS

Html5学习--------canvas编写简单钟表
<!doctype>
<html>
<head>
<meta charset="utf-8" />
<style>
body{background-color:Blue;}
#showCanvas{background-color:white;}
</style>
<script type="text/javascript" >
 window.onload = function () {
 	var canvasElt = document.getElementById("showCanvas");
 	
 	function clockdrow() {
 		if (canvasElt && canvasElt.getContext) {
 			var canvasContext = canvasElt.getContext("2d");
 			
			//定义圆心和半径
 			var x = 200;
 			var y = 200;
 			var r = 150;
 			
			//获取时间
 			var oDate = new Date();
 			var oHour = oDate.getHours();
 			var oMinute = oDate.getMinutes();
 			var oSecond = oDate.getSeconds();
			
			//画表盘上的分钟刻度
 			canvasContext.clearRect(0, 0, canvasContext.width, canvasContext.height)
 			canvasContext.beginPath();
 			for (var i = 0; i < 60; i++) {
 				canvasContext.moveTo(x, y);
 				canvasContext.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);
 			}
 			canvasContext.closePath();
 			canvasContext.stroke();
 			
 			canvasContext.beginPath();
 			canvasContext.fillStyle = "white";
 			for (var i = 0; i < 60; i++) {
 				canvasContext.moveTo(x, y);
 				canvasContext.arc(x, y, r * 19 / 20, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);
 			}
 			canvasContext.closePath();
 			canvasContext.fill();
 			
			//画时针刻度
 			canvasContext.beginPath();
 			canvasContext.lineWidth = 3;
 			for (var i = 0; i < 12; i++) {
 				canvasContext.moveTo(x, y);
 				canvasContext.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false);
 			}
 			canvasContext.closePath();
 			canvasContext.stroke();
 			
 			canvasContext.beginPath();
 			canvasContext.fillStyle = "white";
 			for (var i = 0; i < 60; i++) {
 				canvasContext.moveTo(x, y);
 				canvasContext.arc(x, y, r * 18 / 20, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);
 			}
 			canvasContext.closePath();
 			canvasContext.fill();
 			
			//时针所在位置
 			canvasContext.beginPath();
 			canvasContext.lineWidth = 4;
 			canvasContext.moveTo(x, y);
 			canvasContext.arc(x, y, r * 10 / 20, (-90 + oHour * 30 + oMinute / 2) * Math.PI / 180, (-90 + oHour * 30 + oMinute / 2) * Math.PI / 180, false);
 			canvasContext.closePath();
 			canvasContext.stroke();
 			
			//分针所在位置
 			canvasContext.beginPath();
 			canvasContext.lineWidth = 2;
 			canvasContext.moveTo(x, y);
 			canvasContext.arc(x, y, r * 14 / 20, (-90 + oMinute * 6) * Math.PI / 180, (-90 + oMinute * 6) * Math.PI / 180, false);
 			canvasContext.closePath();
 			canvasContext.stroke();
 			
			//秒针所在位置
 			canvasContext.beginPath();
 			canvasContext.moveTo(x, y);
 			canvasContext.arc(x, y, r * 17 / 20, (-90 + oSecond * 6) * Math.PI / 180, (-90 + oSecond * 6) * Math.PI / 180, false);
 			canvasContext.closePath();
 			canvasContext.stroke();
 		}
 		else {
 			alert("您的浏览器器不支持canvas，请升级浏览器！");
 		}
 	}
	//让表动起来
	 	setInterval(clockdrow, 1000)
 		clockdrow();
 }
</script>
</head>
<body>
<canvas id="showCanvas" width="400px" height="400px" style="border:1px dotted"></canvas>
</body>
</html>