canvas绘制钟表

最新推荐文章于 2022-05-11 19:24:55 发布

原创最新推荐文章于 2022-05-11 19:24:55 发布 · 419 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>钟表</title>
		<style type="text/css">
			canvas{
				border: 1px solid #808080;
				
			}
			
		</style>
	</head>
	<body>
		<canvas id="canvas" width="1300" height="1300"></canvas>
	</body>
	<script type="text/javascript">
		window.onload = function(){		
			function drawClock(){
				var canvas = document.getElementById("canvas");
				var context = canvas.getContext("2d");
			//绘制钟表的圆形与分针刻度	
				context.beginPath();
				context.lineWidth =2;
				context.strokeStyle= "#000000";
				for(var i=0;i<60;i++)
				{
					context.moveTo(300,300);
					context.arc(300,300,200,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
					context.stroke();
				}
			//绘制时针刻度	
				context.beginPath();
				context.lineWidth =4;
				context.strokeStyle= "#FF0000";
				for(var i=0;i<12;i++)
				{
					context.moveTo(300,300);
					context.arc(300,300,200,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
					context.stroke();
				}
			//绘制分针刻度	
				context.fillStyle="#FFFFFF";
				context.beginPath();
				context.moveTo(300,300);
				context.arc(300,300,175,0,2*Math.PI,false);
				context.closePath();
				context.fill();
				
				context.beginPath();		
				context.lineWidth = 10;
				context.strokeStyle = "#AAAAAA";
				context.arc(300,300,200,0,2*Math.PI,false);
				context.stroke();
				
				context.beginPath();		
				context.lineWidth = 9;
				context.strokeStyle = "#FFFFFF";
				context.arc(300,300,191,0,2*Math.PI,false);
				context.stroke();			
			//获取时间
			
				var date = new Date();
				var hour = date.getHours();
				var min = date.getMinutes();
				var sec = date.getSeconds();
				var H = (-90 + 30*hour+min/2)*Math.PI/180;
				var M= (-90 + 6*min)*Math.PI/180;
				var S = (-90 + 6*sec)*Math.PI/180;
			
			//绘制时针
				
				context.beginPath();context.lineWidth = 8;
				context.strokeStyle = "#CA8EFF";
				context.moveTo(300,300);
				context.arc(300,300,110,H,H,false);
				context.stroke();	
			//绘制分针	
				context.beginPath();
				context.lineWidth = 5;
				context.strokeStyle = "#E9967A";
				context.moveTo(300,300);
				context.arc(300,300,130,M,M,false);
				context.stroke();	
			//绘制秒针	
				context.beginPath();
				context.lineWidth = 3;
				context.strokeStyle = "#FF0000";
				context.moveTo(300,300);
				context.arc(300,300,150,S,S,false);
				context.stroke();	
			//绘制钟表的中心
				context.fillStyle="red";
				context.beginPath();
				context.moveTo(300,300);
				context.arc(300,300,5,0,2*Math.PI,false);
				context.closePath();
				context.fill();
				
				context.fillStyle = "black";
				context.beginPath();
				context.moveTo(300,300);
				context.arc(300,300,2,0,2*Math.PI,true);
				context.fill();
				
			//绘制小时刻度
				var hour = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
        
       		 	hour.forEach(function(num,i){
		            var rad = 2 * Math.PI / 12 * i;
		            var x = Math.cos(rad) * 160;
		            var y = Math.sin(rad) * 160;
		          //  console.log(x,y)
		            context.font = "18px sans-serif"
		            context.textAlign = "center";
		            context.textBaseline = "middle";
		            context.fillStyle='black';
		            context.fill();
		            context.fillText(num, x+300, y+300);
        	});

		}
		setInterval(drawClock, 1000);
       drawClock();
	}	
	</script>
</html>