html5用canvas画一个时钟

最新推荐文章于 2021-05-31 02:39:23 发布

ME_KELLER

最新推荐文章于 2021-05-31 02:39:23 发布

阅读量545

点赞数

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

本文链接：https://blog.csdn.net/u011575885/article/details/45031301

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果如图，秒针可以动态走动的直接上源码，比较简单

<!doctype html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		<canvas id="clock" width="500" height="500" >your brower do not support canvas</canvas>
		<script >
		var clock=document.getElementById('clock');
		var cxt=clock.getContext('2d');
		function drawClock(){
			// clear the canvas
			cxt.clearRect(0,0,500,500);
			// get the current time 
			var now = new Date();
			var sec=now.getSeconds();
			var min=now.getMinutes();
			var hor=now.getHours();
			hor=hor+min/60;
			hor=hor>12?hor-12:hor;
			//circle
			cxt.lineWidth=9;
			cxt.strokeStyle="#699"
			cxt.beginPath();
			cxt.arc(250,250,200,0,360,false);
			cxt.closePath();
			cxt.stroke();

			//Scale
				// the scale of hour
				for(var i=0;i<12;i++){
					cxt.save();
					cxt.lineWidth=7;
					cxt.strokeStyle="#099";
					cxt.translate(250,250);
					cxt.rotate(i*Math.PI/6);
					cxt.beginPath();
					cxt.moveTo(0,-175);
					cxt.lineTo(0,-195);
					cxt.closePath();
					cxt.stroke();
					cxt.restore();
				}
				// the scale of minute
				for(var i=0;i<60;i++){
					if(i%5!=0){
						cxt.save();
						cxt.lineWidth=5;
						cxt.strokeStyle="#099";
						cxt.translate(250,250);
						cxt.rotate(i*Math.PI/30);
						cxt.beginPath();
						cxt.moveTo(0,-185);
						cxt.lineTo(0,-195);
						cxt.closePath();
						cxt.stroke();
						cxt.restore();
					}
					
				}
			//hour
			cxt.save();
			cxt.lineWidth=7;
			cxt.strokeStyle="#099";
			cxt.translate(250,250);
			cxt.rotate(hor*30*Math.PI/180);
			cxt.beginPath();
			cxt.moveTo(0,-130);
			cxt.lineTo(0,10);
			cxt.closePath();
			cxt.stroke();
			cxt.restore();
			//minute
			cxt.save();
			cxt.lineWidth=7;
			cxt.strokeStyle="#099";
			cxt.translate(250,250);
			cxt.rotate(min*6*Math.PI/180);
			cxt.beginPath();
			cxt.moveTo(0,-155);
			cxt.lineTo(0,10);
			cxt.closePath();
			cxt.stroke();
			cxt.restore();
			//second
			cxt.save();
			cxt.lineWidth=7;
			cxt.strokeStyle="#099";
			cxt.translate(250,250);
			cxt.rotate(sec*6*Math.PI/180);
			cxt.beginPath();
			cxt.moveTo(0,-175);
			cxt.lineTo(0,20);
			cxt.closePath();
			cxt.stroke();
			//the focus
			cxt.beginPath();
			cxt.arc(0,0,8,0,360,false);
			cxt.closePath();
			cxt.fillStyle="red";
			cxt.fill();
			cxt.stroke();
			cxt.beginPath();
			cxt.arc(0,-150,5,0,360,false);
			cxt.closePath();
			cxt.fillStyle="red";
			cxt.fill();
			cxt.stroke();
			cxt.restore();
		}
		drawClock();
		setInterval(drawClock,1000);
		</script>
	</body>
</html>

ME_KELLER

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5用canvas画一个时钟

效果如图，秒针可以动态走动的直接上源码，比较简单 your brower do not support canvas var clock=document.getElementById('clock'); var cxt=clock.getContext('2d'); function drawClock(){ // clear th
复制链接

扫一扫