H5——canvas——动态时钟

最新推荐文章于 2023-03-15 08:53:49 发布

Langlangzodiac

最新推荐文章于 2023-03-15 08:53:49 发布

阅读量536

点赞数

分类专栏： CV战神养成文章标签： html5 canvas

本文链接：https://blog.csdn.net/Langlangzodiac/article/details/77488602

版权

CV战神养成专栏收录该内容

8 篇文章 0 订阅

订阅专栏

html5新增的画布对象可以在其中绘制任何的图形，以及线条效果,包括图片。

下面绘制了一个动态时钟。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#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(0,0,0);
			}
		</style>
	</head>
	<body>
		<!--
			注意canvas的尺寸应该通过元素的属性直接设置,而不是使用样式实现(失帧)
		-->
		<canvas id="mycanvas" width="500px" height="500px"></canvas>
		<script >
			//获取画布对象
			var mycanvas= document.getElementById('mycanvas');
			//获取一个2d绘图环境
			var ctx = mycanvas.getContext('2d');
			
			function draw(){
				//获取系统时间:
				var nowTime = new Date();
				var hours = nowTime.getHours();
				var minute = nowTime.getMinutes();
				var second = nowTime.getSeconds();

				//防止小时数>12
				hours = hours > 12 ? hours-12 : hours;
				//精准设置小时值
				hours = hours + minute/60;
				
				//清除画布,防止画布覆盖
				ctx.clearRect(0,0,500,500);
				
				//初始化画笔的样式
				ctx.lineWidth = 5;//设置线条的宽度
				ctx.strokeStyle = '#AC2A1C';//设置线条颜色
				
				ctx.beginPath();//开始一个新的画图路径
				//设置一个圆形路径
				ctx.arc(250,250,150,0,360,false);
				//绘制图形
				ctx.stroke();
				ctx.closePath();//结束当前的绘图路径
				
				//绘制刻度(时刻度)
				for(var i = 0; i < 12; i++){
				ctx.beginPath();//开始一个新的画图路径
				ctx.strokeStyle = '#AC2A1C';
				ctx.save();//保存当前绘图环境
				ctx.translate(250,250);//重置绘制起始点(将圆心位置重置为0,0)
				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 = 2;
				ctx.strokeStyle = '#C13890';
				ctx.save();//保存当前绘图环境
				ctx.translate(250,250);//重置绘制起始点(将圆心位置重置为0,0)
				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 = 6;
				ctx.strokeStyle = '#4F8BC2';
				ctx.save();//保存当前绘图环境
				ctx.translate(250,250);//重置绘制起始点(将圆心位置重置为0,0)
				ctx.rotate(hours * 30 * Math.PI / 180);//旋转画布到一定的弧度
				ctx.moveTo(0,10);//设置绘制线条的起始位置
				ctx.lineTo(0,-80);//设置线条的结束位置
				ctx.stroke();//绘制路径
				ctx.restore();//还原初始的绘图环境
				ctx.closePath();//结束路径
			//分针的绘制
			ctx.beginPath();
				ctx.lineWidth = 4;
				ctx.strokeStyle = '#753FB7';
				ctx.save();//保存当前绘图环境
				ctx.translate(250,250);//重置绘制起始点(将圆心位置重置为0,0)
				ctx.rotate(minute * 6 * Math.PI / 180);//旋转画布到一定的弧度
				ctx.moveTo(0,10);//设置绘制线条的起始位置
				ctx.lineTo(0,-110);//设置线条的结束位置
				ctx.stroke();//绘制路径
				ctx.restore();//还原初始的绘图环境
				ctx.closePath();//结束路径
			//秒针的绘制
			ctx.beginPath();
				ctx.lineWidth = 2;
				ctx.strokeStyle = '#F3DE4F';
				ctx.save();//保存当前绘图环境
				ctx.translate(250,250);//重置绘制起始点(将圆心位置重置为0,0)
				ctx.rotate(second * 6 * Math.PI / 180);//旋转画布到一定的弧度
				ctx.moveTo(0,10);//设置绘制线条的起始位置
				ctx.lineTo(0,-135);//设置线条的结束位置
				ctx.stroke();//绘制路径
				ctx.restore();//还原初始的绘图环境
				ctx.closePath();//结束路径	
			}
			setInterval(draw ,1000);
		</script>
	</body>
</html>

附：结果图