首页 > 其他分享> > HTML+js手绘时钟动态效果

HTML+js手绘时钟动态效果

2022-03-19 16:34:55 作者：互联网

遇到的问题：

效果：

源码：

遇到的问题：

使用外链将js链入后网页上并不显示js部分的内容，后直接将js部分使用script标签写在html内

效果：

截图时间为下午16:25

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>4.1手绘时钟</title>
	</head>
	<body>
		<h3>手绘时钟</h3>
		<hr >
		<canvas id="clockCanvas" width="300" height="300" style="border: 1px solid">
			对不起，您的浏览器不支持HTML画布API
		</canvas>
		
		
		<script type="text/javascript">
			var c=document.getElementById('clockCanvas');
			var ctx=c.getContext('2d');
			
			
			//绘制时钟
			function drawClock(){
				ctx.save();
				
				ctx.clearRect(0,0,300,300);
				
				ctx.translate(150,150);
				ctx.rotate(-Math.PI/2);
				ctx.lineWidth=6;
				ctx.lineCap='round';
				
				for (var i=0;i<12;i++){
					ctx.beginPath();
					ctx.rotate(Math.PI/6);
					ctx.moveTo(100,0);
					ctx.lineTo(120,0);
					
					ctx.stroke();
				}
				
				ctx.lineWidth=5;
				for (i=0;i<60;i++){
					ctx.beginPath(118,0);
					ctx.moveTo(120,0);
					ctx.stroke();
					ctx.rotate(Math.PI/30);
				}
				
				var now=new Date();
				var s=now.getSeconds();
				var m=now.getMinutes();
				var h=now.getHours();
				if(h>12){
					h-=12;
				}
					
				//绘制时针
				ctx.save();
				ctx.rotate(h*(Math.PI/6)+(Math.PI/360)*m+(Math.PI/21600)*s);
				ctx.lineWidth=12;
				ctx.beginPath();
				ctx.moveTo(-20,0);
				ctx.lineTo(80,0);
				
				ctx.stroke();
				ctx.restore();
				
				//绘制分针
				ctx.save();
				ctx.rotate((Math.PI/30)*m+(Math.PI/1800)*s);
				ctx.lineWidth=8;
				ctx.beginPath();
				ctx.moveTo(-20,0);
				ctx.lineTo(112,0);
				
				ctx.stroke();
				ctx.restore();
				
				//绘制秒针
				ctx.save();ctx.rotate(s*Math.PI/30);
				ctx.strokeStyle='red';
				ctx.lineWidth=6;
				ctx.beginPath();
				ctx.moveTo(-30,0);
				ctx.lineTo(120,0);
				ctx.stroke();
				
				ctx.fillStyle='red';
				ctx.beginPath();
				ctx.arc(0,0,10,0,Math.PI*2,true);
				ctx.fill();
				ctx.restore();
				
				//绘制表盘
				ctx.lineWidth=12;
				ctx.strokeStyle='gray';
				ctx.beginPath();
				ctx.arc(0,0,140,0,Math.PI*2,true);
				
				ctx.stroke();
				ctx.restore();
			}
			setInterval('drawClock()',1000);
		</script>
	</body>
</html>

标签：restore,beginPath,lineWidth,ctx,js,动态效果,HTML,PI,Math
来源： https://blog.csdn.net/leaf_leaf__/article/details/123597191