H5 canvas小案例-时钟

效果图

在这里插入图片描述
直接干代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>钟表</title>
		<style type="text/css">
			body{
				width: 100vw;
				height: 100vh;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#timer{
				background-color: black;
			}
		</style>
	</head>
	<body>
		
		<div id="timerbox">
			<canvas id="timer" width="300" height="300"></canvas>
		</div>
		
		<script type="text/javascript">
			const timer = document.querySelector("#timer");
			
			const ct = timer.getContext("2d");
			
			
			
			// 转换原点
			ct.translate(150,150);
			
			
			
			function drawTimer(){
				// 清除上一针
				ct.clearRect(-150,-150,300,300)
				// 画圆
				ct.beginPath();
				ct.strokeStyle = 'firebrick';
				ct.lineWidth = "10";
				ct.arc(0,0,120,0,360,false);
				ct.stroke();
				ct.restore()
				
				
				
				
				// 画小刻度
				ct.lineWidth = "3";
				ct.strokeStyle = "lightgreen";
				for (var j = 0; j < 60; j++) {
					ct.save()
					ct.beginPath();
					ct.rotate(j*6*Math.PI/180);
					ct.moveTo(0,-113);
					ct.lineTo(0,-103);
					ct.stroke();
					ct.restore()
				}
				
				
				// 画大刻度
				ct.lineWidth = "5";
				ct.strokeStyle = "hotpink";
				for (var i = 0; i < 12; i++) {
					ct.save()
					ct.beginPath();
					ct.rotate(i*30*Math.PI/180);
					ct.moveTo(0,-113);
					ct.lineTo(0,-93);
					ct.stroke();
					ct.restore()
				}
				
				
				const now = new Date();
				let H = now.getHours() > 12 ? now.getHours() - 12:now.getHours();
				let m = now.getMinutes();
				let s = now.getSeconds();
				
				// 画时针
				ct.lineWidth = "8";
				ct.strokeStyle = "lightseagreen";
				ct.save()
				ct.beginPath();
				ct.rotate(H/12*360*Math.PI/180);
				ct.moveTo(0,10);
				ct.lineTo(0,-60);
				ct.lineCap = "round"
				ct.closePath()
				ct.stroke();
				ct.restore()
				
				// 画分针
				ct.lineWidth = "5";
				ct.strokeStyle = "lightsalmon";
				ct.save()
				ct.beginPath();
				ct.rotate(m/60*360*Math.PI/180);
				ct.moveTo(0,20);
				ct.lineTo(0,-75);
				ct.lineCap = "round"
				ct.closePath()
				ct.stroke();
				ct.restore()
				
				// 画秒针
				ct.lineWidth = "2";
				ct.strokeStyle = "lightskyblue";
				ct.fillStyle = "lightgreen";
				ct.save()
				ct.beginPath();
				ct.rotate(s/ 60 *360*Math.PI/180);
				ct.arc(0,-70,4,0,360,false);
				ct.fill()
				ct.moveTo(0,30);
				ct.lineTo(0,-90);
				ct.lineCap = "round"
				ct.closePath()
				ct.stroke();
				ct.restore()
				
				ct.fillStyle = "blue";
				ct.beginPath();
				ct.arc(0,0,5,0,360,false);
				ct.fill();
			}
			
			drawTimer();
			setInterval(drawTimer,1000);			
		</script>
		
	</body>
</html>
posted on 2021-06-19 11:20 千里码！阅读(3) 评论(0) 编辑收藏举报来源
H5 canvas小案例-时钟

效果图

直接干代码

搜索

常用链接

随笔档案

阅读排行榜
