canvas时钟

最新推荐文章于 2016-10-31 17:31:26 发布
最新推荐文章于 2016-10-31 17:31:26 发布
阅读量953 收藏
点赞数
分类专栏： canvas 文章标签： canvas 时钟 js web 前端效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nbin2008/article/details/48811553
版权

效果图

http://www.hui12.com/nbin/csdn/canvasClock/demo.html

https://nbin2008.github.io/demo/canvasClock/index.html




html代码



js代码

(function(window){
	var proto = {
		init: function(e){
			this.before(e);
			this.start();
		},
		before: function(e){
			this.canvas = e.canvas;
		},
		start: function(){
			var This = this;
			var mycanvas = this.canvas;
			var width = mycanvas.width;
			var height = mycanvas.height;
			var myc = mycanvas.getContext("2d");
			var coords = [];
			setcoords();
			draw();
			setInterval(draw,1000);
			function draw(){
				//绘制点
				myc.clearRect(0, 0, width, height);
				myc.lineCap = 'round';
				myc.beginPath();
				myc.fillStyle = "#000";
				myc.arc(width/2, height/2, height/2, 0, 2*Math.PI);
				myc.fill();
				myc.beginPath();
				myc.fillStyle = "#fff";
				myc.arc(width/2, height/2, height/2*0.9, 0, 2*Math.PI);
				myc.fill();
				for( var i=0; i<coords.length; i++ ){
					myc.beginPath();
					var tmp = coords[i];
					myc.moveTo(tmp[0], tmp[1]);
					myc.lineTo(tmp[2], tmp[3]);
					myc.strokeStyle = "#000";
					myc.lineWidth = tmp[4]?width*0.02:width*0.01;
					myc.stroke();
				};
				//绘制指针
				var tmp = getPoint();
				for( var i=0, l=tmp.length; i<l; i++ ){
					myc.beginPath();
					myc.moveTo(tmp[i][0],tmp[i][1]);
					myc.lineTo(tmp[i][2],tmp[i][3]);
					if( i == 0 ){
						myc.lineWidth = width*0.03;
					}else if( i==1 ){
						myc.lineWidth = width*0.02;
					}else if( i==2 ){
						myc.lineWidth = width*0.01;
					}
					myc.strokeStyle = "#000";
					myc.shadowBlur = 4;
					myc.shadowColor = "#fff";
					myc.stroke();
					//指针圆
					if( i==2 ){
						myc.beginPath();
						var x = tmp[i][4];
						var y = tmp[i][5];
						myc.arc(x, y, width*0.03, 0 , 2*Math.PI);
						myc.fillStyle = "#fff";
						myc.fill();
						myc.strokeStyle = "#000";
						myc.stroke();
					};
				};
				//绘制中心圆
				myc.beginPath();
				myc.arc(width/2, height/2, width*0.03/2, 0 ,2*Math.PI);
				myc.fillStyle = "#fff";
				myc.fill();
				myc.beginPath();
				myc.arc(width/2, height/2, width*0.018/2, 0 ,2*Math.PI);
				myc.fillStyle = "#000";
				myc.fill();
				myc.beginPath();
				myc.arc(width/2, height/2, width*0.005/2, 0 ,2*Math.PI);
				myc.fillStyle = "#fff";
				myc.fill();
			};
			function setcoords(){
				var r1 = height/2*0.85;
				var r2 = height/2*0.8;
				var r3 = height/2*0.75;
				for( var i=1; i<61; i++ ){
					var angle = i*6*Math.PI/180;
					var x1 = width/2 + r1*Math.sin(angle);
					var y1 = height/2 - r1*Math.cos(angle);
					var x2 = width/2 + r2*Math.sin(angle);
					var y2 = height/2 - r2*Math.cos(angle);
					var tmp = [x1, y1, x2, y2];
					if( i%5 == 0 ){
						x2 = width/2 + r3*Math.sin(angle);
						y2 = height/2 - r3*Math.cos(angle);
						tmp.splice(2,1,x2);
						tmp.splice(3,1,y2);
						tmp.push(1);
					};
					coords.push(tmp);
				};
			};
			function getPoint(){
				var angle = getTimeAngle();
				var bLength = 0.05*width;
				var hX1 = width/2 + bLength*Math.sin( (angle.h+180)*Math.PI/180 );
				var hY1 = width/2 - bLength*Math.cos( (angle.h+180)*Math.PI/180 );
				var hX2 = width/2 + 0.15*width*Math.sin( angle.h*Math.PI/180 );
				var hY2 = height/2 - 0.15*width*Math.cos( angle.h*Math.PI/180 );
				var mX1 = width/2 + bLength*Math.sin( (angle.m+180)*Math.PI/180 );
				var mY1 = width/2 - bLength*Math.cos( (angle.m+180)*Math.PI/180 );
				var mX2 = width/2 + 0.28*width*Math.sin( angle.m*Math.PI/180 );
				var mY2 = height/2 - 0.28*width*Math.cos( angle.m*Math.PI/180 );
				var sX1 = width/2 + bLength*Math.sin( (angle.s+180)*Math.PI/180 );
				var sY1 = width/2 - bLength*Math.cos( (angle.s+180)*Math.PI/180 );
				var sX2 = width/2 + 0.35*width*Math.sin( angle.s*Math.PI/180 );
				var sY2 = height/2 - 0.35*width*Math.cos( angle.s*Math.PI/180 );
				var rX1 = width/2 + 0.28*width*Math.sin( angle.s*Math.PI/180 );
				var rY1 = height/2 - 0.28*width*Math.cos( angle.s*Math.PI/180 );
				return [
					[hX1, hY1, hX2, hY2],
					[mX1, mY1, mX2, mY2],
					[sX1, sY1, sX2, sY2, rX1, rY1]
				];
			};
			function getTimeAngle(){
				var now = new Date();
				var s = now.getSeconds();
				var m = now.getMinutes() + s/60;
				var h = (now.getHours()>=12?now.getHours()-12:now.getHours()) + m/60;
				return {
					h: h*30,
					m: m*6,
					s: s*6
				};
			};
		}
	};
	function Clock(e){
		this.init(e)
	};
	Clock.prototype = proto;
	Clock.prototype.constructor = Clock;
	window.Clock = Clock;
})(window);


逻辑部分：



myc是获取canvas绘图环境

width，height是等值，因为绘图都是以圆心为基准，所以要用到

coords = [] 标记时间的点都是小的线段，起点和终点，所以数组结构为2次数组，[ [x1,y1,x2,y2] ... ]，当5分，10分这些长时间点，额外添加一个参数，绘图时加粗

setcoords() 设置时间点函数


function setcoords(){
	var r1 = height/2*0.85;<span style="white-space:pre">		</span>//height/2，为绘图环境高度的一半，用来设置圆的半径（时间点的轨迹），*0.85，因为时钟外面有圆圈，所以缩小
	var r2 = height/2*0.8;<span style="white-space:pre">		</span>//获取短点的的假数值
	var r3 = height/2*0.75;<span style="white-space:pre">		</span>//获取长点的假数值
	for( var i=1; i<61; i++ ){
		var angle = i*6*Math.PI/180;<span style="white-space:pre">	</span>//时间点之间共用60个小格，每个小格的弧度为6，角度转弧度 *π/180；
		var x1 = width/2 + r1*Math.sin(angle);<span style="white-space:pre">		</span>//以0点为例，获取0点的头部x坐标，加width/2，是因为canvas绘图环境都是默认左上角为基点
		var y1 = height/2 - r1*Math.cos(angle);<span style="white-space:pre">		</span>//获取头部y坐标
		var x2 = width/2 + r2*Math.sin(angle);<span style="white-space:pre">		</span>//获取底部x坐标
		var y2 = height/2 - r2*Math.cos(angle);<span style="white-space:pre">		</span>//获取底部y坐标
		var tmp = [x1, y1, x2, y2];
		if( i%5 == 0 ){<span style="white-space:pre">					</span>//这里为五分，十分的时间点，比常规的时间点要长，数据替换，额外添加一个参数
			x2 = width/2 + r3*Math.sin(angle);
			y2 = height/2 - r3*Math.cos(angle);
			tmp.splice(2,1,x2);
			tmp.splice(3,1,y2);
			tmp.push(1);
		};
		coords.push(tmp);<span style="white-space:pre">				</span>//到这里，coords的数据就完成了
	};
};



这个函数作用，获取小时，分钟，秒钟所对应的角度



这个函数是获取指针的坐标

bLength 为端点值，等下用来获取绘图起点，如果端点设置为圆心，这部就可以省略了。





h，m，s分别对应时针，分针，秒针，这是获取指针坐标的函数

以时针为例。



因为秒针上有一个圆圈，所以额外增加参数。




数据都设置完毕，现在开始绘图start函数

//绘制点
myc.clearRect(0, 0, width, height);
myc.lineCap = 'round';
myc.beginPath();
myc.fillStyle = "#000";
myc.arc(width/2, height/2, height/2, 0, 2*Math.PI);
myc.fill();
myc.beginPath();
myc.fillStyle = "#fff";
myc.arc(width/2, height/2, height/2*0.9, 0, 2*Math.PI);
myc.fill();<span style="white-space:pre">				</span>//到这里完毕，绘制黑色圆圈
for( var i=0; i<coords.length; i++ ){<span style="white-space:pre">	</span>//绘制每个时间点
	myc.beginPath();
	var tmp = coords[i];
	myc.moveTo(tmp[0], tmp[1]);
	myc.lineTo(tmp[2], tmp[3]);
	myc.strokeStyle = "#000";
	myc.lineWidth = tmp[4]?width*0.02:width*0.01;<span style="white-space:pre">	</span>//当为五分，十分这些长点的时候，根据是否有额外参数，加粗
	myc.stroke();
};



//绘制指针
var tmp = getPoint();<span style="white-space:pre">	</span>//获取指针数据，下面开始绘制
for( var i=0, l=tmp.length; i<l; i++ ){
	myc.beginPath();
	myc.moveTo(tmp[i][0],tmp[i][1]);
	myc.lineTo(tmp[i][2],tmp[i][3]);
	if( i == 0 ){
		myc.lineWidth = width*0.03;<span style="white-space:pre">	</span>//时针，分针，秒针，分别设置不同的宽度值
	}else if( i==1 ){
		myc.lineWidth = width*0.02;
	}else if( i==2 ){
		myc.lineWidth = width*0.01;
	}
	myc.strokeStyle = "#000";<span style="white-space:pre">		</span>//在指针外绘制白色阴影，让看起来更有层次感
	myc.shadowBlur = 4;
	myc.shadowColor = "#fff";
	myc.stroke();
	//指针圆
	if( i==2 ){<span style="white-space:pre">	</span>//这里是判断是否是秒针，秒针会绘制指针上面的圆圈
		myc.beginPath();
		var x = tmp[i][4];
		var y = tmp[i][5];
		myc.arc(x, y, width*0.03, 0 , 2*Math.PI);
		myc.fillStyle = "#fff";
		myc.fill();
		myc.strokeStyle = "#000";
		myc.stroke();
	};
};


//绘制中心圆
myc.beginPath();
myc.arc(width/2, height/2, width*0.03/2, 0 ,2*Math.PI);
myc.fillStyle = "#fff";
myc.fill();
myc.beginPath();
myc.arc(width/2, height/2, width*0.018/2, 0 ,2*Math.PI);
myc.fillStyle = "#000";
myc.fill();
myc.beginPath();
myc.arc(width/2, height/2, width*0.005/2, 0 ,2*Math.PI);
myc.fillStyle = "#fff";
myc.fill();

这是绘制函数的最后部分，绘制中心点，更好看


canvas时钟制作完毕，这就是整个运行的过程，主要是算好坐标点。

nbin斌
关注
专栏目录
canvas时钟效果
08-31
总结来说，这个canvas时钟效果是通过JavaScript和HTML5的Canvas API实现的，它结合了时间更新、数字绘制、动画原理以及可能的用户交互，展示了Canvas在动态网页设计中的强大能力。为了完全实现这个时钟，你需要补充...
利用canvas绘制一个简单时钟
奋斗在路上
11-18 3824
首先在主页面中构建基本框架，其实只有一个时钟也没有什么框架啦 canvas clock div{ text-align: center; margin-top: 250px; } #clock{ border: 1px solid #ccc; } ---------------------------------------
Android canvas绘图基础之运动的时钟
哆啦A梦的博客
04-04 4297
一、canvas绘制图形canvas可以绘制很多几何图形、文本等很多东西： 1. drawText 2. drawPoint 3. drawLine 4. drawRect 5. drawCircle 6. drawOval 7. drawArc 8. drawPath 9. drawBitmap 关于绘图基础讲解这篇博客讲的非常细致，推荐大家可以去看一下， Android中C
用canvas画一个时钟
敲代码不爱找bug的妹子
10-31 1126
昨天过了一遍canvas的基本用法，今天来写个小小的案例练练手吧。用canvas 画一个时钟，效果图如下：额。。。。配色好像有点丑，那个不是重点，，，嘻嘻~在开始写之前，我们先来考虑一下总共分为几个步骤：1.首先要先画一个背景作为钟表的表盘。比较简单。。 2.背景图画好之后，我们开始画钟表的刻度线，刻度线又分为分刻度和时刻度。 3.刻度线和表盘都是不动的，画完精止的部分接下来就是动态改变的部分，
Android 自定义控件-Canvas和Paint绘图详解-手把手带你绘制一个时钟.
u010575173的博客
09-29 2837
1,Android - Paint基础在自定义控件时，经常需要使用canvas、paint等，在canvas类中，绘画基本都是靠drawXXX()方法来完成的，在这些方法中，很多时候都需要用到paint类型的参数， Paint作为一个非常重要的元素,功能也是非常强大的,这里简单列举一些它的属性和对应的功能. setAntiAlias() //设置画笔的锯齿效果 setColor()
Android之Canvas自定义画一个时钟
GodV的博客
09-06 1046
Android之Canvas自定义画一个时钟自定义控件，在安卓是也是一种无所不能的技术了，所有自带控件，以及组合自带控件不能实现的一些效果，我们都可以通过自定义控件来实现，不过，如果能有系统控件使用的就用系统自带的控件去实现，而不必要用自定义去实现，我们都知道，自定义控件在一定的程度上，效率往往会比系统自带的控件效率低，所以我不到万不得已，不要使用自定义控件，今天用自定一控件，实现一个小小的时钟，具
canvas时钟 javascript
12-21
在这个“canvas时钟 javascript”项目中，我们看到了如何结合canvas和JavaScript来创建一个实时更新的时钟效果。接下来，我们将深入探讨这个知识点。 首先，canvas是一个二维绘图上下文，通过JavaScript的API可以...
Canvas时钟（纯js实现）
09-29
canvas时钟，极其简单的一个纯网页时钟显示，没有框架，没有jQuery，仅仅使用canvas和原生js实现简单纯粹的闹钟。适合新手小白练习代码，也适合需要定制canvas时钟的场景可以参考本代码实现自己的需求。希望在这个...
canvas 时钟
10-28
canvas 时钟
15款基于canvas时钟特效
01-10
15款基于canvas的时钟特效，html5中的canvas制作炫酷时钟
HTML5 canvas时钟效果.zip
05-23
在这个“HTML5 canvas时钟效果.zip”压缩包中，包含了一个使用Canvas API实现的时钟显示功能。这个时钟不仅绘制了表盘、时针、分针和秒针，还展示了数字时间，为网页增添了一种实用且动态的元素。 1. **Canvas基本...
javascript canvas时钟模拟器
10-15
JavaScript Canvas时钟模拟器是一个使用HTML5 Canvas元素和JavaScript编程语言来实现的时钟应用程序。这个时钟模拟器能够显示当前的时间，并且具有切换夜晚模式和白天模式的功能。以下知识点将围绕如何创建这样一个...
canvas 时钟源码
03-27
canvas 时钟 源码
JavaScript Canvas绘制时钟
02-22
<title>JavaScript Canvas时钟 canvas { border: 1px solid black; } <canvas id="clock" width="300" height="300"></canvas> <script src="clock.js"></script> ``` 接下来，我们将在`clock.js`中...
Html5-canvas 时钟
03-14
使用html5中的canvas标签+jquery绘制的时钟走动代码
Canvas时钟绘制
01-20
在这个“Canvas时钟绘制”的主题中，我们将深入探讨如何利用Canvas API来实现一个实时更新的时间显示功能。 首先，我们需要在HTML文档中创建一个canvas元素，并设置其id以便在JavaScript中引用。例如： ```html ...
canvas时钟插件
05-25
用canvas做的时钟，大小可根据canvas宽度调整，钟的样式属性可通过预设值设定。
最丑的时钟效果！js canvas时钟制作方法
10-21
在本文中，我们将探讨如何使用JavaScript中的canvas元素来制作一个具有个性的时钟。尽管作者自嘲这是一个“最丑的时钟效果”，但实质上这个教程将向我们展示如何利用HTML5 canvas来实现动画效果，以及如何通过...
html5css3 canvas时钟
最新发布
05-25
持续集成（CI）和持续部署（CD）是软件开发过程中非常重要的环节，其目的是为了尽可能快地将代码从开发环境交付到生产环境，并保证其质量和稳定性。 持续集成（CI）是指开发人员将代码频繁地提交到版本控制系统，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值