执念博客
js

canvas绘制时钟

不知大家是否看见有的网站会有一个时钟，今天给大家分享一个自己用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(){
			/**
			 *站点：执念博客
			 *作者：执念
			 *网址：http://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

Author

by 执念 
zhinianblog@163.com

Related Posts

java / js Tagged ,

解决js通过get方式传值到servlet乱码的问题

不知道大家在编写项目的代码时，是否遇到过需要通过js把参数传到后台的情况，但是直接传的话会导致后台收到的值确实乱码的，即使设置了仍然没有效果。如果遇到过，那不妨试试下面的方法吧。 首先，需要在js中将需要传递的参数两次编码，向下面这样,其中str就是需要向后台传递的参数。 其次，需要在java代码中进行解码，像这样,其中str就是js传递过来的字符串。 ~谢谢打赏~ 赏 声明：版权所有，盗版必究  执念博客 转载：转载请标明原文链接，谢谢合作 本站如未特别声明，所有压缩文件解压密码均为：www.zhinianblog.com

js Tagged ,

iframe窗口调用父页面中的方法

使用iframe总会遇到各种问题，最近遇到过子窗口需要调用父页面方法的情况，经过研究发现可以使用 其中show()是父页面中的方法，这种方法可以完美解决这种情况。 但是切记父页面的这个show()方法一定不要这样写 我本人就是写到了这里面，导致了怎么也实现不了，找了很久才发现这种情况，希望大家注意。 ~谢谢打赏~ 赏 声明：版权所有，盗版必究  执念博客 转载：转载请标明原文链接，谢谢合作 本站如未特别声明，所有压缩文件解压密码均为：www.zhinianblog.com

js Tagged ,

iframe父窗口随子窗口跳转

不知大家有没有遇到过在页面中使用iframe的情况，但是点击子窗口里的链接却只能在子窗口里进行跳转，如果我们需要父窗口跟随着跳转该怎么做呢？ 方法其实很简单，两行代码就可以了，下面就是 简单吧，具体需不需要函数调用的方式还需要自己斟酌了。 ~谢谢打赏~ 赏 声明：版权所有，盗版必究  执念博客 转载：转载请标明原文链接，谢谢合作 本站如未特别声明，所有压缩文件解压密码均为：www.zhinianblog.com

css / html / js / wordpress Tagged

网页分享按钮

前段时间想将自己的博客弄个可以分享的地方，可是采用百度分享的代码，不知道怎么弄的一直不能运行，于是自己就写了一个。 首先先展示一下效果图:   图中的分享按钮是一直悬浮在网页的右中的位置，方便选择。从图中可以看出，有几个常用的平台分享，当然自己也可以修改代码，做成自己需要的样子。 这是css代码： 这里是html代码，放在body里面： 当然最重要的还是js代码了： 代码全都给大家，我想做网站的大概都简单的知道这些代码该放在哪里的，因此我也就不在这里赘述了。如果有不会的可以在下方留言，我会回复的。 ~谢谢打赏~ 赏 声明：版权所有，盗版必究  执念博客 转载：转载 […]

Comments

智慧家庭
2017年10月30日 at 下午2:38

文章格式不错



无刷直流水泵
2017年11月7日 at 下午2:46

canvas绘制时钟，学习了。js真的好强大。



新闻头条
2017年11月9日 at 下午2:26

文章不错支持一下吧



夏日博客
2017年11月14日 at 下午5:43

感觉WP上面添加一个这样的时钟没啥意义，囧。



知道91博客
2017年12月10日 at 下午7:45

可惜ie8好像不支持吧



嬴冰
2017年12月11日 at 上午9:24

受教了，你真的厉害?



发表评论

在线文件管理源码

2017年10月22日

关于最近未更新的说明

2017年12月10日