用html5实现一个简单的钟表外观

互联网 17-4-27

html5已经出来好长时间了，但仍然有不多小伙伴们不太懂，下面小编就来用html5实现一个简单的钟表外观

<html lang="en-US">  <style>  	#myCanvas{border:3px solid blue;}  </style>  <head>  	<script type="text/javascript">  		window.onload = function()  		{  			var mycanvas = document.getElementById("myCanvas");  			var context = mycanvas.getContext("2d");  					  			context.lineWidth = 2;  			context.strokeStyle = "blue";  			context.fillStyle = "blue";  			context.arc(250,200,5,0,Math.PI*2,true);  			context.fill();    			context.beginPath();  			context.arc(250,200,150,0,Math.PI*2,true);  			context.stroke();    			context.translate(250,200);  			context.rotate(-Math.PI/2);  			  			context.save();  			for(var i=0;i<60;i++)  			{  				if(i % 5 == 0)  				{  					context.fillRect(130,0,20,5);		  					context.fillText((i/5 == 0?12:i/5),120,5);  				}  				else  				{  					context.fillRect(140,0,10,2)  				}  				context.rotate(Math.PI/30);				//360°每6度旋转一次  			}  			  			context.fillRect(0,-2,90,3);    			context.stroke();  		}  	</script>  </head>    <body>  	<canvas id=myCanvas width=500px height=400px></canvas>  </body>  </html>

效果图