`
sdh88hf
  • 浏览: 67971 次
  • 性别: Icon_minigender_1
  • 来自: 绍兴
社区版块
存档分类
最新评论

canvas绘制当前时间时钟

    博客分类：
  • JS
html5 
阅读更多 
<html>
	<head>
		<title>html5 clock</title>
	</head>
	<body>
		<canvas id="clock" width=200 height=200 style="position:absolute;left:200;top:100"></canvas>
		
		<script>
			var clockCanvas = document.getElementById("clock");
			var c = clockCanvas.getContext("2d");
			
			function clock(){
				var date = new Date();
				var d = date.getSeconds();
				var m = date.getMinutes();
				var h = date.getHours();
				
				c.beginPath();
				c.arc(100,100,99,0,2*Math.PI);
				c.moveTo(192,100);
				c.arc(100,100,92,0,2*Math.PI);
				c.textAlign = 'center';
				c.fillText("O",100,100);
				c.font = 'bold 16px Arial';
				c.fillText("12",100,25);
				c.fillText("6",100,185);
				c.fillText("9",25,105);
				c.fillText("3",175,105);
				c.translate(100,100);
				for(var i = 1;i<=12;i++){
					if((i-1)%3!=0){
						c.moveTo(0,-93);
						c.lineTo(0,-75);
					}
					c.rotate(Math.PI/6);
				}
				c.closePath();
				c.stroke();
				
				c.beginPath();
				c.lineWidth = 5;
				
				c.rotate(Math.PI/6/300*(m*60+d));
				c.moveTo(0,0);
				c.lineTo(0,-70);
				c.rotate(-Math.PI/6/300*(m*60+d));
				
				c.rotate(Math.PI/6/3600*(h*3600+m*60+d));
				c.moveTo(0,0);
				c.lineTo(0,-50);
				c.rotate(-Math.PI/6/3600*(h*3600+m*60+d));
				
				c.closePath();
				c.stroke();
				
				c.beginPath();
				
				c.rotate(Math.PI/6/5*d);
				c.lineWidth = 2;
				c.moveTo(0,0);
				c.lineTo(0,-60);
				c.rotate(-Math.PI/6/5*d);
				
				c.moveTo(0,0);
				c.arc(0,0,8,0,Math.PI*2);
				
				c.closePath();
				c.fill();
				c.stroke();
			
			}
			clock();
			
			setInterval(function(){
				clockCanvas.width = 0;
				clockCanvas.width = 200;
				clockCanvas.height = 0;
				clockCanvas.height = 200;
				clock();
			},1000);
			
		</script>
		
	</body>

</html>
分享到：
| canvas绘制科赫雪花
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics