canvas标签clock(时钟)案例

最新推荐文章于 2022-05-06 16:16:50 发布

小獾哥

最新推荐文章于 2022-05-06 16:16:50 发布

阅读量596

点赞数 2

分类专栏： Web前端文章标签： html5 canvas

本文链接：https://blog.csdn.net/qq_26870933/article/details/78756621

版权

Web前端专栏收录该内容

69 篇文章 3 订阅

订阅专栏

这里写图片描述

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<canvas id="canvas" width="500" height="500" >
			您的浏览器不支持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 sec=now.getSeconds();
		var min=now.getMinutes();
		var hour=now.getHours();
		hour=hour+min/60;
		hour=hour>12?hour-12:hour;
		
		cxt.beginPath();
		cxt.lineWidth=5;
		cxt.strokeStyle="blue";
		cxt.arc(250,250,200,0,2*Math.PI,false);
		cxt.stroke();
		cxt.closePath();
		
		for(var i=0;i<12;i++){
		cxt.beginPath();
		cxt.save();
		cxt.strokeStyle="black";
		cxt.lineWidth=5;
		cxt.translate(250,250);
		cxt.rotate(i*30*Math.PI/180);
		cxt.moveTo(0,-170);
		cxt.lineTo(0,-190);
		cxt.stroke();	
		cxt.restore();
		cxt.closePath();
		}
		
		for(var i=0;i<60;i++){
		cxt.beginPath();
		cxt.save();
		cxt.strokeStyle="black";
		cxt.lineWidth=3;
		cxt.translate(250,250);
		cxt.rotate(i*6*Math.PI/180);
		cxt.moveTo(0,-180);
		cxt.lineTo(0,-190);
		cxt.stroke();	
		cxt.restore();
		cxt.closePath();
		}
		
		cxt.beginPath();
		cxt.save();
		cxt.strokeStyle="black";
		cxt.lineWidth=5;
		cxt.translate(250,250);
		cxt.rotate(hour*30*Math.PI/180);
		cxt.moveTo(0,-140);
		cxt.lineTo(0,10);
		cxt.stroke();	
		cxt.restore();
		cxt.closePath();
		
		cxt.beginPath();
		cxt.save();
		cxt.strokeStyle="black";
		cxt.lineWidth=3;
		cxt.translate(250,250);
		cxt.rotate(min*6*Math.PI/180);
		cxt.moveTo(0,-160);
		cxt.lineTo(0,15);
		cxt.stroke();	
		cxt.restore();
		cxt.closePath();
		
		cxt.beginPath();
		cxt.save();
		cxt.strokeStyle="red";
		cxt.lineWidth=1.5;
		cxt.translate(250,250);
		cxt.rotate(sec*6*Math.PI/180);
		cxt.moveTo(0,-168);
		cxt.lineTo(0,20);
		cxt.stroke();	
		cxt.restore();
		cxt.closePath();
				
		cxt.beginPath();
		cxt.strokeStyle="red";
		cxt.fillStyle="#bbb";
		cxt.lineWidth=2;
		cxt.arc(250,250,5,0,2*Math.PI,false);
		cxt.stroke();	
		cxt.fill();
		cxt.restore();
		cxt.closePath();
		
		cxt.beginPath();
		cxt.save();
		cxt.strokeStyle="red";
		cxt.lineWidth=2;
		cxt.translate(250,250);
		cxt.rotate(sec*6*Math.PI/180);
		cxt.arc(0,-150,5,0,2*Math.PI,false);
		cxt.stroke();	
		cxt.fill();
		cxt.restore();
		cxt.closePath();
		
		cxt.beginPath();
		cxt.fillStyle="red";
		cxt.font="30px 楷体"
		cxt.fillText("焦作时间",200,320);
		cxt.closePath();
		}
		setInterval(drawClock,1000)
			
	</script>
</body>
</html>