canvas绘制电子时钟

最新推荐文章于 2024-07-02 22:34:09 发布

meiziluleyiguan

最新推荐文章于 2024-07-02 22:34:09 发布

阅读量582

点赞数

分类专栏： canvas 文章标签： html5 canvas 时钟

本文链接：https://blog.csdn.net/meiziluleyiguan/article/details/52949200

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5新增了许多实用的属性，今天带来一款用canvas绘制的电子时钟.

代码如下：

<span style="font-size:12px;"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>canvas-时钟</title>
	<style>	
		*{
			margin: 0;	
			padding: 0;	
		}
		html,body{
			width: 100%;
			height: 100%;	
		}
		body{
			background: #f0f0f0;
		}
		#canvas{
			width: 400px;	
			height: 400px;
			position: absolute;
			left: 0;	
			top: 0;	
			right: 0;	
			bottom: 0;	
			margin: auto;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){

			init();
			// 初始化
			function init(){
				// 页面打开时执行一次clock函数
				clock();
				// 每隔一秒执行一次clock函数
				setInterval(clock,1000);
			}
			function clock(){
				// 获取canvas画布
				var canvas = document.getElementById("canvas");
				var ctx =  canvas.getContext("2d");
				// 创建时间对象并获取当前系统时间
				var now_data = new Date();
				// 小时,电脑系统时间为24制,时钟为12制
				var hour = now_data.getHours()%12;
				// 分钟
				var min = now_data.getMinutes();
				// 秒
				var sec = now_data.getSeconds();
				// 准备绘制
				ctx.save();
				// 每次绘制之前应将画布清除再继续绘制
				ctx.clearRect(0,0,canvas.width,canvas.height);
				// 将中心点移动到(200,200)
				ctx.translate(200,200);
				// 绘制刻度线
				for(var i=1;i<=60;i++){
					// 整个表盘分为12份，一份代表每一小时
					if(i%5==0){
						ctx.save();
						ctx.beginPath();
						ctx.rotate(Math.PI/30);
						ctx.moveTo(140,0);
						ctx.lineTo(150,0)
						ctx.lineWidth = 4;
						ctx.stroke();
						ctx.closePath();
						ctx.restore();
					}
					// 整个表盘分为60份，一份代表每一分钟
						ctx.beginPath();
						// 每一分钟旋转6度
						ctx.rotate(Math.PI/30);
						ctx.moveTo(145,0);
						ctx.lineTo(150,0);
						ctx.stroke();
						ctx.closePath();
				}
				// 绘制秒针
				ctx.save()
				ctx.beginPath();
				// 获取当前系统时间再进行旋转,
				// 秒针旋转角度为当前获取的秒数*6度
				ctx.rotate(sec*Math.PI/30);
				ctx.moveTo(0,20);
				ctx.lineTo(0,-138);
				ctx.lineWidth=1;
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
				// 绘制分针
				ctx.save();
				ctx.beginPath();
				// 分针旋转的角度为当前分钟数*6度+当前秒针数*(6度/60)
				// 秒针走60下，分针走一下
				ctx.rotate(min*Math.PI/30+ sec*(Math.PI/30/60));
				ctx.moveTo(0,20);
				ctx.lineTo(0,-130);
				ctx.lineWidth = 2;
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
				// 时针
				ctx.save();
				ctx.beginPath();
				// 时针旋转角度为当前小时数*30度+当前分钟数*(0.5度)+当前秒针数*(0.5/60度)
				// hour*(Math.PI/6):每过一个小时，应该旋转30度
				// min*(Math.PI/6/60):分针走60下，时针动一下
				// sec*(Math.PI/6/60/60):秒针走3600下，时钟动一下
				ctx.rotate(hour*(Math.PI/6)+min*(Math.PI/6/60)+sec*(Math.PI/6/60/60));
				ctx.moveTo(0,10);
				ctx.lineTo(0,-120);
				ctx.lineWidth = 3;
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
				// 开始绘制外面的圆
				ctx.beginPath();
				ctx.arc(0,0,150,0,Math.PI*2,false);
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
			}
		}
	</script>
</head>
<body>
	<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html></span>