html5 canvas仿百度时间

作者: haibao 分类: 笔记 发布时间: 2015-08-10 14:06
活着, 如同生命最后一天般活着;学习, 如同永远活着般学习。——圣雄甘地 (印度国父)

今天帮同事做了一个仿百度时间的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,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';
                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仿百度时间],如没有标注转载,均为原创,转载请保留出处和链接,欢迎分享 谢谢。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

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

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>