当前位置:

html5 canvas仿百度时间

本文最后更新于2015-08-10,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

温馨提示:本文共5161个字,读完预计13分钟。

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

html5 canvas仿百度时间-何海宝的博客

html5 canvas仿百度时间-何海宝的博客

友情提示:该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>
版权申明:本文地址 ,本博客所有文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!

我要说两句