用canvas标签实现网页H5动态时钟

最新推荐文章于 2021-12-25 23:42:39 发布

原创最新推荐文章于 2021-12-25 23:42:39 发布 · 1.5k 阅读

CC 4.0 BY-SA版权

本文详细介绍如何使用HTML5的canvas元素实现一个动态时钟。文章通过实例代码讲解了canvas的基本用法，包括设置画布尺寸、绘制圆形、线条及文字等，并实现了时钟指针的实时更新。

<!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: deepskyblue;
			}
			#box{
				margin: 0 auto;
				width: 190px;
				height: 60px;
				background-color: #ff6700;
				border: 5px solid #fff;
				box-shadow: 0 0 10px rgba(0,0,0,0.2);
				color: #fff;
				line-height: 60px;
				font-size: 1.2em;
			}
		</style>
	</head>
	<body>
		<!--
			canvas:H5新增的画布对象,可以在其中绘制任何的图形,以及线条效果包括图片
			注意canvas的尺寸应该通过元素的属性直接设置,而不是使用样式实现(会失帧)
		-->
		<div id="box"></div>
		<canvas id="mycanvas" width="500px" height="500px"></canvas>
		<script>
			// 获取画布对象
			var mycanvas = document.getElementById('mycanvas');
			console.info(mycanvas);
			// 获取一个2d绘图环境(拿到一支画笔)
			var ctx = mycanvas.getContext('2d');
			
			function draw(){
				var date = new Date();
				var hours = date.getHours();
				var min = date.getMinutes();
				var sec = date.getSeconds();
//				console.info(hours+':'+min+':'+sec);
				hours = hours > 12 ? hours-12 : hours;					
				
				// 清除画布(防止覆盖)
				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(); // 保存当前绘图环境
					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 = 3;
					ctx.save();
					ctx.translate(250,250);
					ctx.rotate(i*6*Math.PI/180);
					ctx.moveTo(0,140);
					ctx.lineTo(0,145);
					ctx.stroke();
					ctx.restore();
					ctx.closePath();
				}
				
				// 绘制时针 分针 秒针
				ctx.beginPath();
				ctx.lineWidth = 6;
				ctx.save();
				ctx.translate(250,250);
				ctx.rotate(((hours+min/60)+sec/3600)*30*Math.PI/180);
				ctx.moveTo(0,15);
				ctx.lineTo(0,-100);
				ctx.stroke();
				ctx.restore();
				ctx.closePath();
				
				ctx.beginPath();
				ctx.lineWidth = 4;
				ctx.save();
				ctx.translate(250,250);
				ctx.rotate((min+sec/60)*6*Math.PI/180);
				ctx.moveTo(0,15);
				ctx.lineTo(0,-120);
				ctx.stroke();
				ctx.restore();
				ctx.closePath();
				
				ctx.beginPath();
				ctx.lineWidth = 2;
				ctx.strokeStyle = '#f00';
				ctx.save();
				ctx.translate(250,250);
				ctx.rotate(sec*6*Math.PI/180);
				ctx.moveTo(0,15);
				ctx.lineTo(0,-135);
				ctx.stroke();
				ctx.restore();
				ctx.closePath();
			}
			
			setInterval(draw, 1000);
			
			function f1(){
				var date = new Date();
				var year = fmtDate(date.getFullYear());//完整的年份
				var month = fmtDate(date.getMonth()+1);// 7  月份从0开始
				var day = fmtDate(date.getDate());// 号
				var hours = fmtDate(date.getHours());
				var min = fmtDate(date.getMinutes());
				var sec = fmtDate(date.getSeconds());
				var content = (year+'-'+month+'-'+day+' '+hours+':'+min+':'+sec);
				
				document.getElementById('box').innerHTML = content;
			}
			// 每隔一秒执行一次函数
			setInterval(f1,1000);
			
			function fmtDate(v){
				if(v < 10){
					return '0'+v;
				}
				return v;
			}
		</script>
	</body>
</html>