canvas实现动态时钟

最新推荐文章于 2025-07-11 12:01:54 发布

温其如玉_

最新推荐文章于 2025-07-11 12:01:54 发布

阅读量999

点赞数

CC 4.0 BY-SA版权

文章标签： canvas html5

本文链接：https://blog.youkuaiyun.com/xhchen971028/article/details/78305490

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="mycanvas" width="1000" height="1000" style="border: 1px solid;">			
		</canvas>
		<script type="text/javascript">
			var can = document.getElementById("mycanvas");
			var cxt = can.getContext("2d");
			
			function drawbase(){
				cxt.beginPath();
				cxt.rect(100,300,400,300);
				cxt.stroke();
				cxt.closePath();
			
				cxt.beginPath();
				cxt.moveTo(100,300);
				cxt.bezierCurveTo(110,30,490,30,500,300);
				cxt.stroke();
				cxt.closePath();
				
				cxt.beginPath();
				cxt.moveTo(470,190);
				cxt.quadraticCurveTo(480,50,495,260);
				cxt.stroke();
				cxt.closePath();
				
				cxt.beginPath();
				cxt.arc(300,200,90,0,Math.PI*2,true);
				cxt.stroke();
				cxt.closePath();
				
				//表盘刻度  时刻度
				cxt.save()
				cxt.translate(300,200);
				for(var i = 0; i<12; i++){
					cxt.rotate(Math.PI/6);
					cxt.beginPath();
					cxt.moveTo(0,-90);
					cxt.lineTo(0,-80);
					cxt.stroke();
					cxt.closePath();
				}
				cxt.restore();
			
				//分刻度
				cxt.save()
				cxt.translate(300,200);
				for(var i = 0; i<60; i++){
					cxt.rotate(Math.PI/30);
					cxt.beginPath();
					cxt.moveTo(0,-90);
					cxt.lineTo(0,-85);
					cxt.stroke();
					cxt.closePath();
				}
				cxt.restore();
			}
			
			//钟摆
			var b = 0;
			function zb(){
				if(b==0){
					cxt.beginPath();
					cxt.moveTo(300,300);
					cxt.lineTo(200,500);
					cxt.stroke();
					cxt.closePath();
					
					cxt.beginPath();
					cxt.arc(200,500,10,0,Math.PI*2,true);
					cxt.fill();
					cxt.closePath();
					b = 1;
				}else{
					cxt.beginPath();
					cxt.moveTo(300,300);
					cxt.lineTo(400,500);
					cxt.stroke();
					cxt.closePath();
					
					cxt.beginPath();
					cxt.arc(400,500,10,0,Math.PI*2,true);
					cxt.fill();
					cxt.closePath();
					b = 0;
				}
			}
			
			//冒烟
			var y = 0;
			function maoy(){
				if(y==0){
					cxt.beginPath();
					cxt.arc(480,50,10,0,Math.PI*2,true);
					cxt.fill();
					cxt.closePath();
					y = 1;
				}else{
					cxt.beginPath();
					cxt.arc(480,80,10,0,Math.PI*2,true);
					cxt.fill();
					cxt.closePath();
					y = 0;
				}
			}
			
			//指针
			function clock(){
				var date = new Date();
				var second = date.getSeconds();
				var min = date.getMinutes();
				var hour = date.getHours();
				
				//秒针
				cxt.save();
				cxt.translate(300,200);
				cxt.rotate(second*Math.PI/30);
				cxt.beginPath();
				cxt.moveTo(0,10);
				cxt.lineTo(0,-75);
				cxt.stroke();
				cxt.closePath();
				cxt.restore();
				
				//分针
				cxt.save();
				cxt.translate(300,200);
				cxt.rotate(min*Math.PI/30);
				cxt.beginPath();
				cxt.moveTo(0,5);
				cxt.lineTo(0,-70);
				cxt.stroke();
				cxt.closePath();
				cxt.restore();
				
				//时针
				cxt.save();
				cxt.translate(300,200);
				cxt.rotate((hour+min/60)*Math.PI/6);
				cxt.beginPath();
				cxt.moveTo(0,5);
				cxt.lineTo(0,-65);
				cxt.stroke();
				cxt.closePath();
				cxt.restore();
			}
			
			function draw(){
				cxt.clearRect(0,0,1000,800);
				drawbase();
				zb();
				maoy();
				clock();
			}
			
			draw();
			setInterval(draw,1000);
		</script>
	</body>
</html>