canvas绘制动态时钟

最新推荐文章于 2021-05-05 21:58:45 发布

mr_tangshuai

最新推荐文章于 2021-05-05 21:58:45 发布

阅读量292

点赞数

分类专栏： html5 javascript css 文章标签： canvas

本文链接：https://blog.csdn.net/mr_tangshuai/article/details/78488857

版权

javascript 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

html5

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#mycanvas{
				position: absolute;
				left:50%;
				margin-left:-250px;
				border:5px solid #fff;
				box-shadow: 0 0 10px rgba(0,0,0,0.2);
				background-color: rgb(58, 179, 255);
			}
		</style>
	</head>
	<body>
		<!--
			canvas：html5新增的画布对象，可以在其中绘制任何的图形，以及线条效果，包括图片
			注意canvas的尺寸应该通过元素的属性直接设置，而不是使用样式实现(失帧)
		-->
		<canvas id="mycanvas" width="500px" height="500px">您的浏览器太low了,请切换</canvas>
		<script>
			//获取画布对象
			var mycanvas = document.getElementById('mycanvas');
			//获取一个2d绘图环境（拿到一支画笔）
			var ctx = mycanvas.getContext('2d');
			
		function draw(){
	
			//获取系统时间
			var nowTime = new Date();
			var hours = nowTime.getHours();//获取时
			var minutes = nowTime.getMinutes();//获取分
			var seconds = nowTime.getSeconds();//获取秒
			
			//防止小时超过12
			hours = hours > 12 ? hours-12 : hours;
			//精准设置小时值 
			hours = hours + minutes/60;  
	
			//清除画布（防止覆盖）
			ctx.clearRect(0,0,500,500);
	
			//初始化画笔的样式
			ctx.lineWidth = 5;	//设置线条的宽度
			ctx.strokeStyle = '#fff'; //设置线条颜色
			
			ctx.beginPath();//开始新的绘图路径
			//设置一个圆形路径
			ctx.arc(250,250,150,0,360,false);
			//绘制图形
			ctx.stroke();
			ctx.closePath();//结束当前绘图路径
			
			//绘制刻度(时刻度)
			for(var i = 0;i < 12;i++){
				ctx.beginPath();
				ctx.lineWidth = 10;
				//保存当前绘图环境
				ctx.save();
				//重置绘制起始位置(将圆心位置重置为0,0)
				ctx.translate(250,250);
				//旋转画布到一定的弧度    弧度=角度*PI/180
				ctx.rotate(i * 30 * Math.PI / 180);
				//设置绘制线条的起始位置
				ctx.moveTo(0,140);
				//设置线条的结束位置
				ctx.lineTo(0,150);
				//绘制路径
				ctx.stroke();
				//还原初始的绘图环境
				ctx.restore();
				ctx.closePath();
			}
			
			//绘制刻度(分刻度)
			for(var i = 0;i < 60;i++){
				ctx.beginPath();
				ctx.lineWidth = 3;
				//保存当前绘图环境
				ctx.save();
				//重置绘制起始位置(将圆心位置重置为0,0)
				ctx.translate(250,250);
				//旋转画布到一定的弧度    弧度=角度*PI/180
				ctx.rotate(i * 6 * Math.PI / 180);
				//设置绘制线条的起始位置
				ctx.moveTo(0,142);
				//设置线条的结束位置
				ctx.lineTo(0,146);
				//绘制路径
				ctx.stroke();
				//还原初始的绘图环境
				ctx.restore();
				ctx.closePath();
			}
			
			/*绘制时针*/
			ctx.beginPath();
			ctx.lineWidth = 5;
			//保存当前绘图环境
			ctx.save();
			//重置绘制起始位置(将圆心位置重置为0,0)
			ctx.translate(250,250);
			//旋转画布到一定的弧度    弧度=角度*PI/180
			ctx.rotate(hours * 30 * Math.PI / 180);
			//设置绘制线条的起始位置
			ctx.moveTo(0,10);
			//设置线条的结束位置
			ctx.lineTo(0,-100);
			//绘制路径
			ctx.stroke();
			//还原初始的绘图环境
			ctx.restore();
			ctx.closePath();
			
			/*绘制分针*/
			ctx.beginPath();
			ctx.lineWidth = 3;
			//保存当前绘图环境
			ctx.save();
			//重置绘制起始位置(将圆心位置重置为0,0)
			ctx.translate(250,250);
			//旋转画布到一定的弧度    弧度=角度*PI/180
			ctx.rotate(minutes * 6 * Math.PI / 180);
			//设置绘制线条的起始位置
			ctx.moveTo(0,10);
			//设置线条的结束位置
			ctx.lineTo(0,-120);
			//绘制路径
			ctx.stroke();
			//还原初始的绘图环境
			ctx.restore();
			ctx.closePath();
			
			
			/*绘制秒针*/
			ctx.beginPath();
			ctx.lineWidth = 1;
			ctx.strokeStyle = '#f00';
			//保存当前绘图环境
			ctx.save();
			//重置绘制起始位置(将圆心位置重置为0,0)
			ctx.translate(250,250);
			//旋转画布到一定的弧度    弧度=角度*PI/180
			ctx.rotate(seconds * 6 * Math.PI / 180);
			//设置绘制线条的起始位置
			ctx.moveTo(0,10);
			//设置线条的结束位置
			ctx.lineTo(0,-135);
			//绘制路径
			ctx.stroke();
			//还原初始的绘图环境
			ctx.restore();
			ctx.closePath();
		}
		
		setInterval(draw,1000);
		
		</script>
	</body>
</html>