html5实现的canvas时钟

最新推荐文章于 2024-09-01 15:02:55 发布

iteye_3742

最新推荐文章于 2024-09-01 15:02:55 发布

阅读量102

点赞数

分类专栏： Html5 文章标签： html5 canvas clock

本文链接：https://blog.csdn.net/iteye_3742/article/details/82610786

版权

Html5 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

html5实现的canvas时针

效果：

代码：

<!doctype html>
<html>
	<head>
		<title>时钟</title>
	</head>
	<body>
		<canvas width="500" height="500" id="canvas">
			您的浏览器不支持CANVAS标签
		</canvas>
		<script>
			var canvas = document.getElementById("canvas");
			var cxt = canvas.getContext("2d");
			
			function drawClock(){
				cxt.clearRect(0,0,500,500);		//清空画布
				//获取时间
				var now = new Date();
				var hour = now.getHours();
				var minute = now.getMinutes();
				var second = now.getSeconds();
				hour = hour>12?hour-12:hour;
				
				//表盘
				cxt.lineWidth=10;
				cxt.strokeStyle="blue";
				cxt.beginPath();
				cxt.arc(250,250,200,0,Math.PI*2,false);
				cxt.closePath();
				cxt.stroke();
				//时刻度
				for(var i=0;i<12;i++){
					cxt.save();
					cxt.lineWidth=8;
					cxt.strokeStyle="#000";
					cxt.translate(250,250);
					cxt.rotate(i*Math.PI*2/12);
					cxt.beginPath();
					cxt.moveTo(0,-195);
					cxt.lineTo(0,-175);
					cxt.closePath();
					cxt.stroke();
					cxt.restore();
				}
				//分刻度
				for(var i=0;i<60;i++){
					cxt.save();
					cxt.lineWidth=5;
					cxt.strokeStyle="#000";
					cxt.translate(250,250);
					cxt.rotate(i*Math.PI*2/60);
					cxt.beginPath();
					cxt.moveTo(0,-195);
					cxt.lineTo(0,-185);
					cxt.closePath();
					cxt.stroke();
					cxt.restore();
				}
				//时针
				cxt.save();
				cxt.lineWidth=8;
				cxt.strokeStyle="#000";
				cxt.translate(250,250);
				cxt.rotate(hour*(Math.PI*2/12)+minute*((Math.PI*2/12)/60));
				cxt.beginPath();
				cxt.moveTo(0,-145);
				cxt.lineTo(0,15);
				cxt.closePath();
				cxt.stroke();
				cxt.restore();
				//分针
				cxt.save();
				cxt.lineWidth=5;
				cxt.strokeStyle="#000";
				cxt.translate(250,250);
				cxt.rotate(minute*Math.PI*2/60);
				cxt.beginPath();
				cxt.moveTo(0,-165);
				cxt.lineTo(0,20);
				cxt.closePath();
				cxt.stroke();
				cxt.restore();
				//秒针
				cxt.save();
				cxt.lineWidth=3;
				cxt.strokeStyle="#f00";
				cxt.translate(250,250);
				cxt.rotate(second*Math.PI*2/60);
				cxt.beginPath();
				cxt.moveTo(0,-175);
				cxt.lineTo(0,30);
				cxt.stroke();
				cxt.closePath();
				cxt.beginPath();
				cxt.arc(0,0,8,0,Math.PI*2);
				cxt.closePath();
				cxt.fill();
				cxt.stroke();
				cxt.beginPath();
				cxt.arc(0,-145,5,0,Math.PI*2);
				cxt.closePath();
				cxt.fill();
				cxt.stroke();
				cxt.restore();
			}
			drawClock();
			setInterval(drawClock,1000);
		</script>
	</body>
</html>

iteye_3742

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5实现的canvas时钟

html5实现的canvas时针效果：代码：&lt;!doctype html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;时钟&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas width="500" height="5
复制链接

扫一扫

专栏目录