html5 canvas仿百度时间

haibao 笔记 2015-08-10 14:06 685
一个人的价值, 在于他贡献了什么, 而不在于他获得了什么。——爱因斯坦

凌晨好, 本文除去代码部分,共5161个字,预计阅读时间需要13分钟。

今天帮同事做了一个仿百度时间的demo,时钟用的是html5的canvas,其他都是利用js实现。效果如下图:

友情提示:该demo暂时支持兼容到IE9以上以及其他主流浏览器,如需支持IE6-8请自行下载html5shiv.js和excanvas.js。

具体实现代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>DEMO</title>
	<style>
		html,body,div,p{margin:0;padding:0;}
		.beijingtime-box{width: 540px;height: 100px;font-family: "Microsoft Yahei", arial;overflow: hidden;background-color:#056AC1!important;background-image: linear-gradient(top,#056AC1,#5FA2DD);background-image: -moz-linear-gradient(top,#056AC1,#5FA2DD);background-image: -webkit-linear-gradient(top,#056AC1,#5FA2DD);background-image: -o-linear-gradient(top,#056AC1,#5FA2DD);background-image: -ms-linear-gradient(top,#056AC1,#5FA2DD);}
		#clock{width: 64px;height: 64px;float: left;margin: 20px 0 0 50px;}
		.beijing_time{margin: 0 7px 0 25px;font-size: 55px;color:#fff;height: 100px;line-height: 100px;width: 228px;letter-spacing: 1px;float: left;white-space: nowrap;}
		.beijing_time_second{font-size: 32px;}
		.beijing_datebox{float: left;text-align: left;font-size: 20px;color: #fff;margin-top: 20px;}
		.beijing_week{display: block;}
		.beijing_date{font-size: 15px;}
	</style>
</head>
<body>
	<div class="beijingtime-box">
		<canvas id="clock" width="64" height="64"></canvas>
		<p class="beijing_time"></p>
		<p class="beijing_datebox">
			<span class="beijing_week"></span>
			<span class="beijing_date"></span>
		</p>
	</div>
 
	<script>
	window.onload = function(){
	    // inner variables
		var canvas, ctx;
		var clockRadius = 250;
		var clockImage;
 
		// draw functions :
		function clear() { // clear canvas function
		    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
		}
 
		function drawScene() { // main drawScene function
		    clear(); // clear canvas
 
		    // get current time
		    var date = new Date();
		    var hours = date.getHours();
		    var minutes = date.getMinutes();
		    var seconds = date.getSeconds();
		    hours = hours > 12 ? hours - 12 : hours;
		    var hour = hours + minutes / 60;
		    var minute = minutes + seconds / 60;
 
		    // save current context
		    ctx.save();
 
		    // draw clock image (as background)
		    ctx.drawImage(clockImage, 0, 0, 64, 64);
 
		    ctx.translate(canvas.width / 2, canvas.height / 2);
		    ctx.beginPath();
 
		    // draw hour
		    ctx.save();
		    var theta = (hour - 3) * 2 * Math.PI / 12;
		    ctx.rotate(theta);
		    ctx.beginPath();
		    ctx.moveTo(-1, -3);
		    ctx.lineTo(-1, 3);
		    ctx.lineTo(clockRadius * 0.1, 1);
		    ctx.lineTo(clockRadius * 0.1, -1);
		    ctx.fillStyle = 'white';
		    ctx.fill();
		    ctx.restore();
 
		    // draw minute
		    ctx.save();
		    var theta = (minute - 15) * 2 * Math.PI / 60;
		    ctx.rotate(theta);
		    ctx.beginPath();
		    ctx.moveTo(-3, -2);
		    ctx.lineTo(-3, 2);
		    ctx.lineTo(clockRadius * 0.1, 1);
		    ctx.lineTo(clockRadius * 0.1, -1);
		    ctx.fillStyle = 'white';
		    ctx.fill();
		    ctx.restore();
 
		    // draw second
		    ctx.save();
		    var theta = (seconds - 15) * 2 * Math.PI / 60;
		    ctx.rotate(theta);
		    ctx.beginPath();
		    ctx.moveTo(-4, -1);
		    ctx.lineTo(-4, 1);
		    ctx.lineTo(clockRadius * 0.01, 1);
		    ctx.lineTo(clockRadius * 0.1, -1);
		    ctx.fillStyle = 'red';
		    ctx.fill();
		    ctx.restore();
		    ctx.restore();
		}
 
	    canvas = document.getElementById('clock');
	    ctx = canvas.getContext('2d');
		clockImage = new Image();
		clockImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAYAAACO98lFAAAF+UlEQVR4nO2bPW8TSRjHk8iOrSRYwWcljkVe5LzIsUUSRFA4IkQCci4FSJQpKCgoKCgpKCiQKPgAV1BQpEhBQUGRkpKCguLKK66kuPI+wu+K+Y/y3LJre+114vXlL1l6xrOz88zszDPP24yMnAOASSAvugSsmToMvQLMiM4BU+fBX98ALAGjohtAVfQvwK55zk7CDjAregHYNHWL58d9DwCuGHoXKImuANuiJ4AH5jk7CXtAQfQmsCS6CNwzzw3mCgHGgANgUuWq/5LaDk3Ro8Aj085OwiEwLtpOSANYFZ1TP5nzG10LABngo9nvq8B10XngN7MlbnrG/eBE20nwgx4Ftk3bppncGlA3/R9f+MoQE69FZzXwrMrzwFib9rSpH/PywKw2P+nPgU/JjCQmJMCKosvAD6Cs8rz/ah2+q+UkBJ7NGzkxDfwNrKhcAO7EGkgv0MCb5ou/Ak66fFfHkxBo9zvwTnQGuA/Md/OuOJ3OADVTbgC3ROeBv4DbfWXirO+aVt+UylvAlqmvApV+dJwB7nF23o8C637PA4+Bb4l3HM7LF+BpgA8vdOeBfb9Kk+qwZDrIaRuEzrKYe5JY5+F9PAS+R9TNib8JlceQ8tVrpzXgLpBTecoLwYhnt8LqkkKrPnBK1bTocZzC1kiq4yrw4MLP4w6BU872MTZKNy8Z1TFYNv9VolbAoEErYsmUS8CvXvmK+6KmToF4jQcE+phrGsdMnIYZQ2eBW8B6X7jsM7SNd7w803/tbQ6cLXAc2AotVd9BheVbW+I98LmThnngtZSRV0hPTyuk37yQiv22rXAPzFwZOJEm+Ljv3PYBONP8T63uJfN/uIwDruAstFWrbQG3gW9ShGqhjQcMOK/WKfAHsGf+zwLLEpRXoxpPAtdx5vB8oO5JvxWhpIDzVT4LCPlr+sgbGA9Yq5dkiWEOpwGSdeOtHqhKxaymXRC2g9TpBSlPK7ZiVEfIZthWGBbIwDoEbkjwhx/9mpBU6gXtgLMqfx6bhGFDtsFQyYEo4Nz+c0AdKHiBUcV5d5vAzYtmsp/QBz+QObAcKgM70q1TjKjtUMKFxibSai12A423CMyOyNTcxTlNHmECI8MIycBHGu8uChZd4hIjLvjRChfNXxIA/hn2MV4iEeD8Bzu4fIDD/8HpMKFx7mncdR9jnMVFdaNNzSGCLMmCxj130fwMBnDxxQWZ0Xsot2hYYca5qXHnfGxxE+eXKwy76oxzFRTMh4/0NQ6tP6HdA0WZmU2G17NU4Sy0WAxWLuISMFYZcseKDKhVjXe51YNjmPjdMEDHYkdxyBwuCeIAE7FR3UPSFXw5Cvy3oHHVifKo41LifnpIk/IF+E56gi814Kt+NqHLfuTpqMY2YjONS5P7gZKk0gbgCBdL/UCcKDsuivscF8V9R0pSdKKAcyS/0XhedioXjoFPmOhMWhUoyzcuFnkCnHbScMrQGVyiZFozVVZwoQQbZe88zCjV8r4mIZVueKnIDZxTNVw9bvOCO1ZzxEVsiq3aDAqk/VZMuYzLxex+W+NSZZuRx8qAQUZhE6UgJ/HCZVxipE+VnYxaEVJSVsLqkoL6CFXatAJ80ndOqnHv8kxGh0/pH9eELEU8ewo867nT1vwcAV8j6ryB5FOQMySZ7S57YhelykroVDnLcj/E5Qj1XYhKEzwyfCxzdlWoqhWQPB84f1zDlNeAHdEZXJbYXuIdh/OyJU3QXwPaDvC2nugKiGCiFFh2L4CPXb6r25svH4A3orM6Bs8v9xqX7+Nvspakki6pXImjkMSZBMmkBdFl9XtN5avA3VgD6QUBdfQ98FZ0Fmeh+buNsyRzG64iOqP3+xX4EnP3qic9oFuIqc/mWFoGNkSPS1h6wdkw9IR5h70Xaf/fIPxeZN0fker/NM7K6yskpZsoURLnxLghegI4MM92ckN2n/AbsnmthsF0BmP0c8kNf1dyjrObc53eld4y+z94VzoVmqu34PzyryOnpgbUya35Rf57az7aKZoG4LxU/kyfxaTIBCahjmKDOLU3vuXXBf4F6lBoOD9BwWoAAAAASUVORK5CYII=';
                drawScene();
		setInterval(drawScene, 1000);
 
	     //获取当前日期
	     function getCurDate(){
	     	var d = new Date();
			 var week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[d.getDay()];
			 var years = d.getFullYear();
			 var month = add_zero(d.getMonth()+1);
			 var days = add_zero(d.getDate());
			 var hours = add_zero(d.getHours());
			 var minutes = add_zero(d.getMinutes());
			 var seconds = add_zero(d.getSeconds());
 
			 document.querySelector('.beijing_time').innerHTML = hours+"<span>:</span>"+minutes+" <span class='beijing_time_second'>"+seconds+"</span>";		 		 
			 document.querySelector('.beijing_week').innerHTML = week;
			 document.querySelector('.beijing_date').innerHTML = years+"年"+month+"月"+days+"日 ";
	     }
	     function add_zero(temp){
		  if(temp<10) return "0"+temp;
		  else return temp;
		}
		 getCurDate();
		 setInterval(function(){ getCurDate(); },1000);
 
	};
	</script>
</body>
</html>

本文标题:html5 canvas仿百度时间

本文地址:http://www.hehaibao.com/cavas-js-clock/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

发表评论

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