执念
不知大家是否看见有的网站会有一个时钟，今天给大家分享一个自己用canvas绘制的时钟,只要系统的时间正确，该时钟的时间就不会错。废话不多说了，下面就是时钟的整个html代码，只需要将代码复制之后保存为html文件就可以运行了，至于怎么加在自己的网站上就需要你们自己琢磨了。
运行结果如下图所示:

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="keywords" content="时钟">
	<meta name="description" content="">
	<title>clock</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
	</style>
</head>
<body bgcolor="black">
	<canvas id="canvas" width="800" height="600">您的浏览器不支持canvas</canvas>
	<script type="text/javascript">
		(function(){
			/**
			 *站点：执念博客
			 *作者：执念
			 *网址：https://www.zhinianblog.com
			*/
			var canvas = document.getElementById("canvas");
			var ctx = canvas.getContext("2d");
			var x = window.innerWidth/2;
			var y = window.innerHeight/2;
			var r = 80;
			var now=new Date();
			var hours=now.getHours();
			var minutes=now.getMinutes();
			var seconds=now.getSeconds();
			drawClock();
			move(hours,minutes,seconds);
			function drawClock(){ //画时钟
				ctx.strokeStyle = "gray";
				ctx.lineWidth = "3";
				ctx.beginPath();
				var sr = 5;
				ctx.arc(x,y,r,0,2*Math.PI);
				ctx.stroke();
				ctx.beginPath();
				ctx.arc(x,y,2,0,2*Math.PI);
				ctx.fill();
				ctx.font = "13px Arial";
				ctx.fillStyle = "gray";
				var time = -1;
				for(var i=0;i<60;i++){
					var q = i*2*Math.PI/60;
					var x1 = 0;//刻度终点
					var y1 = 0;
					var x2 = 0;//刻度起点
					var y2 = 0;
					var x3 = 0;//刻度值位置
					var y3 = 0;

					sr = 5;
					if(i%5 == 0){
						sr = 10;
						time++;
					}
					if(i%15 == 0){
						sr = 15;
					}
					if(q>=0 && q<Math.PI/2){
						x1 = x + r*Math.sin(q);
						y1 = y - r*Math.cos(q);
						x2 = x + (r-sr)*Math.sin(q);
						y2 = y - (r-sr)*Math.cos(q);
						x3 = x + (r-sr-14)*Math.sin(q);
						y3 = y - (r-sr-13)*Math.cos(q);
					}
					if(q>=Math.PI/2 && q<Math.PI){
						x1 = x + r*Math.sin(Math.PI-q);
						y1 = y + r*Math.cos(Math.PI-q);
						x2 = x + (r-sr)*Math.sin(Math.PI-q);
						y2 = y + (r-sr)*Math.cos(Math.PI-q);
						x3 = x + (r-sr-12)*Math.sin(Math.PI-q);
						y3 = y + (r-sr-5)*Math.cos(Math.PI-q);
					}
					if(q>=Math.PI && q<3*Math.PI/2){
						x1 = x - r*Math.cos(3*Math.PI/2-q);
						y1 = y + r*Math.sin(3*Math.PI/2-q);
						x2 = x - (r-sr)*Math.cos(3*Math.PI/2-q);
						y2 = y + (r-sr)*Math.sin(3*Math.PI/2-q);
						x3 = x - (r-sr-6)*Math.cos(3*Math.PI/2-q);
						y3 = y + (r-sr-5)*Math.sin(3*Math.PI/2-q);
					}
					if(q>=3*Math.PI/2 && q<2*Math.PI){
						x1 = x - r*Math.sin(2*Math.PI-q);
						y1 = y - r*Math.cos(2*Math.PI-q);
						x2 = x - (r-sr)*Math.sin(2*Math.PI-q);
						y2 = y - (r-sr)*Math.cos(2*Math.PI-q);
						x3 = x - (r-sr-0)*Math.sin(2*Math.PI-q);
						y3 = y - (r-sr-15)*Math.cos(2*Math.PI-q);
					}
					ctx.lineWidth = "1";
					ctx.moveTo(x2,y2);
					ctx.lineTo(x1,y1);
					ctx.stroke();
					if(i%5 == 0){
						if(time == 0){
							ctx.fillText("12",x3-8,y3);
						}else if(time == 3){
							ctx.fillText(time,x3+3,y3+5);
						}else if(time == 6){
							ctx.fillText(time,x3-3,y3+2);
						}else if(time == 9){
							ctx.fillText(time,x3+3,y3+5);
						}else{
							ctx.fillText(time,x3,y3);
						}
					}
					
				}
			}
			function move(hour,min,sec){ //指针移动
				
				if(hour >= 12){
					hour -= 12;
				}
				hour+= min/60;
				var arrSec = calculate(sec,30);
				var arrMin = calculate(min,40);
				var arrHour = calculate(hour*5+0.2,50);
				var time;//定时器
				ctx.lineWidth = "1";
				ctx.moveTo(x,y);
				ctx.lineTo(arrSec[0],arrSec[1]);
				ctx.stroke();

				ctx.moveTo(x,y);
				ctx.lineTo(arrMin[0],arrMin[1]);
				ctx.stroke();

				ctx.moveTo(x,y);
				ctx.lineTo(arrHour[0],arrHour[1]);
				ctx.stroke();
				drawClock();
	            time = setInterval(function(){
					var now=new Date();
					var hours=now.getHours();
					var minutes=now.getMinutes();
					var seconds=now.getSeconds();
					hour = hours;min = minutes;sec = seconds;
                    if(hour >= 12){
						hour -= 12;
					}
					hour+= min/60;
					var arrSec = calculate(sec,30);
					var arrMin = calculate(min,40);
					var arrHour = calculate(hour*5+0.2,50);
					ctx.clearRect(0,0,800,600);
					ctx.moveTo(x,y);
				    ctx.lineTo(arrSec[0],arrSec[1]);
				    ctx.stroke();

				    ctx.moveTo(x,y);
				    ctx.lineTo(arrMin[0],arrMin[1]);
				    ctx.stroke();

				ctx.moveTo(x,y);
				ctx.lineTo(arrHour[0],arrHour[1]);
				ctx.stroke();
				drawClock();
				drawClock();
				
				},1000);
				
			}
			
			function calculate(i,sr){ //计算指针的位置
				var q = i*2*Math.PI/60;
				var m = new Array();
				if(q>=0 && q<Math.PI/2){
					m[0] =x + (r-sr)*Math.sin(q);
					m[1] = y - (r-sr)*Math.cos(q);
				}
				if(q>=Math.PI/2 && q<Math.PI){
					m[0] = x + (r-sr)*Math.sin(Math.PI-q);
					m[1] = y + (r-sr)*Math.cos(Math.PI-q);
				}
				if(q>=Math.PI && q<3*Math.PI/2){
					m[0] = x - (r-sr)*Math.cos(3*Math.PI/2-q);
					m[1] = y + (r-sr)*Math.sin(3*Math.PI/2-q);
				}
				if(q>=3*Math.PI/2 && q<2*Math.PI){
					m[0] = x - (r-sr)*Math.sin(2*Math.PI-q);
					m[1] = y - (r-sr)*Math.cos(2*Math.PI-q);
				}
				return m;
			}

			
			function resize(){ //监听浏览器大小改变
				var w = window.innerWidth;
				x = window.innerWidth/2;
				y = window.innerHeight/2;
				if(w >= 750){
					r = 80;
				}else if(w < 750){
					r = 60;
				}
				console.log(w);
				var now=new Date();
				var hours=now.getHours();
				var minutes=now.getMinutes();
				var seconds=now.getSeconds();
				drawClock();
				move(hours,minutes,seconds);
				
			}
			window.addEventListener("resize", resize);
		})();
	</script>
</body>
</html>

 
 

声明：版权所有，盗版必究  执念博客

转载：转载请标明原文链接，谢谢合作

本站如未特别声明，所有压缩文件解压密码均为：www.zhinianblog.com


 
 

赏

11 thoughts on “canvas绘制时钟”

发表评论

电子邮件地址不会被公开。 必填项已用*标注