Verwenden Sie HTML5, um ein einfaches Erscheinungsbild einer Uhr zu implementieren-H5-Tutorial-php.cn

Verwenden Sie HTML5, um ein einfaches Erscheinungsbild einer Uhr zu implementieren

零下一度

Freigeben： 2017-04-27 15:08:37

Original

2389 Leute haben es durchsucht

HTML5 gibt es schon lange, aber es gibt immer noch nicht viele Freunde, die es nicht verstehen. Lassen Sie uns HTML5 verwenden, um ein einfaches Uhr-Erscheinungsbild zu implementieren

<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>

Nach dem Login kopieren

Rendering

Das obige ist der detaillierte Inhalt vonVerwenden Sie HTML5, um ein einfaches Erscheinungsbild einer Uhr zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!