当前位置: 首页 » 前端开发 » html5 canvas仿百度时间
 |  全屏浏览  |  字号调整:

html5 canvas仿百度时间

2015-08-10 14:06:42 前端开发 0 1.02 k 百度已收录
本文最后更新于2015-08-10,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!
历史上的今天:10月20日 - 1962年,中印边境自卫反击战爆发

周六晚上好, 本文除去代码部分,共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,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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仿百度时间

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

版权声明:本博客所有文章除特别声明外,均采用 署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!


发表评论

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