绘制时钟

最新推荐文章于 2021-08-18 10:52:41 发布

as1405101

最新推荐文章于 2021-08-18 10:52:41 发布

阅读量135

点赞数

原文链接：http://www.cnblogs.com/qilin0/p/11512314.html

版权

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Canvas绘制时钟Demo</title>
	<style>
	#myCanvas{
	border: 1px solid;
	}
	</style>
	</head>
	<body>
	<canvas id="myCanvas" width="500" height="400">
	很抱歉,你的浏览器不支持canvas元素
	</canvas>
	<script>
	var c = document.getElementById('myCanvas');//获取Canvas对象
	var ctx = c.getContext('2d');//获取上下文
	function drawClock()
	{
	ctx.clearRect(0,0, c.width, c.height);//清除画布
	c.width = c.width;//清除画布时需要重置宽度,否则会有一个画布的重叠
	var x = 250,y = 200,r = 180;//定义圆盘的中心坐标和圆盘的半径
	/获取实际的时间/
	var objTime = new Date();
	var objHour = objTime.getHours();
	var objMin = objTime.getMinutes();
	var objSen = objTime.getSeconds();
	/将时间转换为具体的弧度/
	/*
	* 因为时钟是从12点的位置算作开始,但是canvas是3点钟的位置算作0度,所以-90度指向12点方向
	* 时针是每小时相隔30度,objMin/2是为了做出当分针过半时,时针也相应的处于两个小时之间
	* 分针和秒针是每次相隔6度
	*/
	var arcHour = (-90+objHour30 + objMin/2)Math.PI/180;
	var arcMin = (-90+objMin6)Math.PI/180;
	var arcSen = (-90+objSen6)Math.PI/180;
	/绘制圆盘/
	ctx.beginPath();
	for(var i=0;i<60;i++)//一共360度,一共60分钟,每分钟相隔6度,360/6=60
	{
	ctx.moveTo(x,y);
	ctx.arc(x,y,r,6iMath.PI/180,6(i+1)Math.PI/180,false);
	}
	ctx.closePath();
	ctx.stroke();
	/绘制白盘盖住下面的线/
	ctx.fillStyle = 'white';
	ctx.beginPath();
	ctx.arc(x,y,r19/20,0,360Math.PI/180,false);//半径取值为r的20分之19
	ctx.closePath();
	ctx.fill();
	/依葫芦画瓢,制作每一个小时的线/
	/绘制圆盘/
	ctx.beginPath();
	ctx.lineWidth = 3;
	for(var i=0;i<12;i++)//一共360度,一共12个小时,每小时相隔30度,360/30=12
	{
	ctx.moveTo(x,y);
	ctx.arc(x,y,r,30iMath.PI/180,30(i+1)Math.PI/180,false);
	}
	ctx.closePath();
	ctx.stroke();
	/绘制白盘盖住下面的线/
	ctx.fillStyle = 'white';
	ctx.beginPath();
	ctx.arc(x,y,r18/20,0,360Math.PI/180,false);//半径取值为r的20分之18
	ctx.closePath();
	ctx.fill();
	/开始绘制时针分针和秒针,技巧就是起始弧度和结束弧度值一样/
	/开始绘制时针/
	ctx.beginPath();
	ctx.moveTo(x,y);
	ctx.lineWidth = 7;
	ctx.lineCap = 'round';
	ctx.arc(x,y,r*10/20,arcHour,arcHour,false);//半径取值为r的20分之10
	ctx.stroke();
	ctx.closePath();
	/开始绘制分针/
	ctx.beginPath();
	ctx.moveTo(x,y);
	ctx.lineWidth = 5;
	ctx.lineCap = 'round';
	ctx.arc(x,y,r*12/20,arcMin,arcMin,false);//半径取值为r的20分之12
	ctx.stroke();
	ctx.closePath();
	/开始绘制秒针/
	ctx.beginPath();
	ctx.moveTo(x,y);
	ctx.lineWidth = 2;
	ctx.lineCap = 'round';
	ctx.arc(x,y,r*16/20,arcSen,arcSen,false);//半径取值为r的20分之16
	ctx.stroke();
	ctx.closePath();
	}
	setInterval('drawClock()',1000);//每隔1秒调用绘制时钟函数
	</script>
	</body>
	</html>