Skip to content

Commit a54ffa8

Browse files
geekapegeekape
committedMar 19, 2018
炫酷时钟效果
1 parent 1c5508d commit a54ffa8

File tree

6 files changed

+447
-0
lines changed

6 files changed

+447
-0
lines changed
 

‎倒计时炫酷时钟/index.html

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Canvas圆形炫酷时钟</title>
6+
<style>
7+
body,html,canvas{padding: 0;margin: 0;}
8+
</style>
69

710
</head>
811
<body style="height:100%">

‎炫酷时钟/README.md

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
## canvas 炫酷时钟
2+
3+
### 实现功能
4+
* [x]小球动态时钟
5+
* [x]彩色小球动画
6+
7+
### 实现步骤
8+
1. 构建一个点阵的二维数组（0-9）
9+
2. 创建画布
10+
3. 获取当前的时分秒分别执行绘制函数
11+
4. 设置定时器执行绘制时钟函数
12+
5. 对比绘制时钟前的时间和绘制时钟后的时分秒，有变动就执行生成小方块函数
13+
14+
### 可能会碰到的问题
15+
1. 当前时分秒有个位数如何处理？
16+
>一个以%取余数，一个除以10
17+
2. 彩色小球重叠绘制？
18+
>绘制之后的小球没有做动画，一直在原坐标点上
19+
3. 运行久了消耗电脑CPU
20+
>页面ball.message数组一直在增加，删除走出画面的小球
21+
>1. 判断小球是否在画面内（判断左边缘和右边缘）
22+
>2. 如果小球还在画面内，就放到数组前面
23+
>3. 如果当前小球大于在画面中的小球数量，就删除后面的小球数组

‎炫酷时钟/clock.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en" style="height:100%">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Canvas圆形炫酷时钟</title>
7+
<style>
8+
body,
9+
html,
10+
canvas {
11+
padding: 0;
12+
margin: 0;
13+
height: 100%;
14+
}
15+
</style>
16+
</head>
17+
18+
<body style="height:100%">
19+
20+
<canvas id="canvas">你的浏览器不支持canvas,请更换</canvas>
21+
<script src="digit.js"></script>
22+
<script src="clock.js"></script>
23+
</body>
24+
25+
</html>

‎炫酷时钟/clock.js

+208
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
var c = document.getElementById('canvas');
2+
c.width = document.body.clientWidth;
3+
c.height = document.body.clientHeight;
4+
5+
// 全局常量
6+
var marginLeft = Math.round(c.width / 20);
7+
var marginTop = Math.round(c.height / 5);
8+
var radius = Math.round(c.width * 4.5 / 5 / 108) - 1;
9+
10+
// 全局变量
11+
curHours = new Date().getHours();
12+
curMinutes = new Date().getMinutes();
13+
curSeconds = new Date().getSeconds();
14+
15+
16+
17+
// 兼容性检测
18+
if (c.getContext) {
19+
var ctx = c.getContext('2d');
20+
// drawing code here
21+
} else {
22+
alert("Your browser doesn't support it Canvas")
23+
}
24+
25+
26+
setInterval(function() {
27+
draw.clock();
28+
contrast();
29+
30+
}, 50);
31+
32+
function contrast() {
33+
nextHours = new Date().getHours();
34+
nextMinutes = new Date().getMinutes();
35+
nextSeconds = new Date().getSeconds();
36+
37+
// 当前时和下次时的个位十位数比较
38+
if (parseInt(curHours / 10) != parseInt(nextHours / 10)) {
39+
console.log(`当前时${curSeconds}下次时${nextSeconds}`);
40+
ball.add(marginLeft + 0, marginTop, parseInt(nextMinutes / 10));
41+
42+
}
43+
if (parseInt(curHours % 10) != parseInt(nextHours % 10)) {
44+
console.log(`当前时${curSeconds}下次时${nextSeconds}`);
45+
ball.add(marginLeft + 15 * (radius + 1), marginTop, parseInt(nextMinutes / 10));
46+
47+
}
48+
49+
// 当前分和下次时的个位十位数比较
50+
if (parseInt(curMinutes / 10) != parseInt(nextMinutes / 10)) {
51+
console.log(`当前分${curSeconds}下次分${nextSeconds}`);
52+
ball.add(marginLeft + 38 * (radius + 1), marginTop, parseInt(nextMinutes / 10))
53+
54+
}
55+
if (parseInt(curMinutes % 10) != parseInt(nextMinutes % 10)) {
56+
console.log(`当前分${curSeconds}下次分${nextSeconds}`);
57+
ball.add(marginLeft + 53 * (radius + 1), marginTop, parseInt(nextMinutes % 10))
58+
}
59+
60+
// 当前秒和下次时的个位十位数比较
61+
if (parseInt(curSeconds / 10) != parseInt(nextSeconds / 10)) {
62+
console.log(`当前秒${curSeconds}下次秒${nextSeconds}`);
63+
ball.add(marginLeft + 76 * (radius + 1), marginTop, parseInt(nextSeconds / 10))
64+
}
65+
if (parseInt(curSeconds % 10) != parseInt(nextSeconds % 10)) {
66+
console.log(`当前秒${curSeconds}下次秒${nextSeconds}`);
67+
ball.add(marginLeft + 91 * (radius + 1), marginTop, parseInt(nextSeconds % 10));
68+
69+
}
70+
71+
72+
// 当前的等于下次的
73+
curHours = nextHours;
74+
curMinutes = nextMinutes;
75+
curSeconds = nextSeconds;
76+
ball.up();
77+
console.log(`当前页面有${ball.message.length}个小球`);
78+
79+
80+
}
81+
// 小球
82+
var ball = {
83+
colors: [
84+
"#666699",
85+
"#0099CC",
86+
"#CC3399",
87+
"#FFFF00",
88+
"#009933",
89+
"#CC6600",
90+
"#FF6666",
91+
"#CCCCCC",
92+
"#009999",
93+
"#FF0033"
94+
],
95+
message: [],
96+
// 添加小球
97+
add: function(x, y, num) {
98+
for (var i = 0; i < digit[num].length; i++) {
99+
for (var j = 0; j < digit[num][i].length; j++) {
100+
if (digit[num][i][j] == 1) {
101+
var aBall = {
102+
x: x + j * 2 * (radius + 1) + (radius + 1),
103+
y: y + i * 2 * (radius + 1) + (radius + 1),
104+
g: 1.5 + Math.random(),
105+
angle: "90deg",
106+
vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,
107+
vy: -5,
108+
color: ball.colors[Math.floor(Math.random() * ball.colors.length)]
109+
};
110+
111+
ball.message.push(aBall);
112+
}
113+
}
114+
}
115+
},
116+
117+
up: function() {
118+
for (var i = 0; i < ball.message.length; i++) {
119+
ball.message[i].x += ball.message[i].vx;
120+
ball.message[i].y += ball.message[i].vy;
121+
ball.message[i].vy += ball.message[i].g;
122+
if (ball.message[i].y >= c.height - radius) {
123+
ball.message[i].y = c.height - radius;
124+
ball.message[i].vy = -ball.message[i].vy * 0.62;
125+
}
126+
}
127+
128+
var cnt = 0;
129+
for (var i = 0; i < ball.message.length; i++) {
130+
if (
131+
ball.message[i].x + radius > 0 &&
132+
ball.message[i].x - radius < c.width
133+
) {
134+
ball.message[cnt++] = ball.message[i];
135+
}
136+
}
137+
138+
while (ball.message.length > cnt) {
139+
ball.message.pop();
140+
}
141+
}
142+
};
143+
144+
145+
// 绘制时钟
146+
var draw = {
147+
148+
clock: function() {
149+
ctx.clearRect(0, 0, c.width, c.height);
150+
var time = new Date();
151+
var hours = time.getHours();
152+
var minutes = time.getMinutes();
153+
var seconds = time.getSeconds();
154+
console.log(hours, minutes, seconds);
155+
156+
// 时
157+
draw.renderDigit(marginLeft, marginTop, parseInt(hours / 10), ctx);
158+
draw.renderDigit(marginLeft + 15 * (radius + 1), marginTop, parseInt(hours % 10), ctx);
159+
draw.renderDigit(marginLeft + 30 * (radius + 1), marginTop, 10, ctx);
160+
161+
// 分
162+
draw.renderDigit(marginLeft + 38 * (radius + 1), marginTop, parseInt(minutes / 10), ctx);
163+
draw.renderDigit(marginLeft + 53 * (radius + 1), marginTop, parseInt(minutes % 10), ctx);
164+
draw.renderDigit(marginLeft + 68 * (radius + 1), marginTop, 10, ctx);
165+
166+
// 秒
167+
draw.renderDigit(marginLeft + 76 * (radius + 1), marginTop, parseInt(seconds / 10), ctx);
168+
draw.renderDigit(marginLeft + 91 * (radius + 1), marginTop, parseInt(seconds % 10), ctx);
169+
170+
// 绘制彩色小球
171+
for (var i = 0; i < ball.message.length; i++) {
172+
ctx.fillStyle = ball.message[i].color;
173+
ctx.beginPath();
174+
ctx.arc(ball.message[i].x, ball.message[i].y, radius, 0, 2 * Math.PI);
175+
// ctx.rect(ball.message[i].x, ball.message[i].y, radius * 2, radius * 2);
176+
ctx.closePath();
177+
ctx.fill();
178+
}
179+
180+
},
181+
182+
// 绘制函数
183+
renderDigit: function(x, y, num) {
184+
185+
ctx.fillStyle = "#0099CC";
186+
187+
for (var i = 0; i < digit[num].length; i++) {
188+
for (var j = 0; j < digit[num][i].length; j++) {
189+
// 计算圆心的位置
190+
// ctxX：x+j*2*(R+1)+(R+1)
191+
// ctxY：y+i*2*(R+1)+(R+1)
192+
if (digit[num][i][j] == 1) {
193+
ctx.beginPath();
194+
ctx.arc(
195+
x + j * 2 * (radius + 1) + (radius + 1),
196+
y + i * 2 * (radius + 1) + (radius + 1),
197+
radius,
198+
0,
199+
2 * Math.PI
200+
);
201+
// ctx.rect(x + j * 2 * (radius + 1) + (radius + 1), y + i * 2 * (radius + 1) + (radius + 1), radius * 2, radius * 2);
202+
ctx.closePath();
203+
ctx.fill();
204+
}
205+
}
206+
}
207+
}
208+
};

‎炫酷时钟/digit.js

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
digit =
2+
[
3+
[
4+
[0,0,1,1,1,0,0],
5+
[0,1,1,0,1,1,0],
6+
[1,1,0,0,0,1,1],
7+
[1,1,0,0,0,1,1],
8+
[1,1,0,0,0,1,1],
9+
[1,1,0,0,0,1,1],
10+
[1,1,0,0,0,1,1],
11+
[1,1,0,0,0,1,1],
12+
[0,1,1,0,1,1,0],
13+
[0,0,1,1,1,0,0]
14+
],//0
15+
[
16+
[0,0,0,1,1,0,0],
17+
[0,1,1,1,1,0,0],
18+
[0,0,0,1,1,0,0],
19+
[0,0,0,1,1,0,0],
20+
[0,0,0,1,1,0,0],
21+
[0,0,0,1,1,0,0],
22+
[0,0,0,1,1,0,0],
23+
[0,0,0,1,1,0,0],
24+
[0,0,0,1,1,0,0],
25+
[1,1,1,1,1,1,1]
26+
],//1
27+
[
28+
[0,1,1,1,1,1,0],
29+
[1,1,0,0,0,1,1],
30+
[0,0,0,0,0,1,1],
31+
[0,0,0,0,1,1,0],
32+
[0,0,0,1,1,0,0],
33+
[0,0,1,1,0,0,0],
34+
[0,1,1,0,0,0,0],
35+
[1,1,0,0,0,0,0],
36+
[1,1,0,0,0,1,1],
37+
[1,1,1,1,1,1,1]
38+
],//2
39+
[
40+
[1,1,1,1,1,1,1],
41+
[0,0,0,0,0,1,1],
42+
[0,0,0,0,1,1,0],
43+
[0,0,0,1,1,0,0],
44+
[0,0,1,1,1,0,0],
45+
[0,0,0,0,1,1,0],
46+
[0,0,0,0,0,1,1],
47+
[0,0,0,0,0,1,1],
48+
[1,1,0,0,0,1,1],
49+
[0,1,1,1,1,1,0]
50+
],//3
51+
[
52+
[0,0,0,0,1,1,0],
53+
[0,0,0,1,1,1,0],
54+
[0,0,1,1,1,1,0],
55+
[0,1,1,0,1,1,0],
56+
[1,1,0,0,1,1,0],
57+
[1,1,1,1,1,1,1],
58+
[0,0,0,0,1,1,0],
59+
[0,0,0,0,1,1,0],
60+
[0,0,0,0,1,1,0],
61+
[0,0,0,1,1,1,1]
62+
],//4
63+
[
64+
[1,1,1,1,1,1,1],
65+
[1,1,0,0,0,0,0],
66+
[1,1,0,0,0,0,0],
67+
[1,1,1,1,1,1,0],
68+
[0,0,0,0,0,1,1],
69+
[0,0,0,0,0,1,1],
70+
[0,0,0,0,0,1,1],
71+
[0,0,0,0,0,1,1],
72+
[1,1,0,0,0,1,1],
73+
[0,1,1,1,1,1,0]
74+
],//5
75+
[
76+
[0,0,0,0,1,1,0],
77+
[0,0,1,1,0,0,0],
78+
[0,1,1,0,0,0,0],
79+
[1,1,0,0,0,0,0],
80+
[1,1,0,1,1,1,0],
81+
[1,1,0,0,0,1,1],
82+
[1,1,0,0,0,1,1],
83+
[1,1,0,0,0,1,1],
84+
[1,1,0,0,0,1,1],
85+
[0,1,1,1,1,1,0]
86+
],//6
87+
[
88+
[1,1,1,1,1,1,1],
89+
[1,1,0,0,0,1,1],
90+
[0,0,0,0,1,1,0],
91+
[0,0,0,0,1,1,0],
92+
[0,0,0,1,1,0,0],
93+
[0,0,0,1,1,0,0],
94+
[0,0,1,1,0,0,0],
95+
[0,0,1,1,0,0,0],
96+
[0,0,1,1,0,0,0],
97+
[0,0,1,1,0,0,0]
98+
],//7
99+
[
100+
[0,1,1,1,1,1,0],
101+
[1,1,0,0,0,1,1],
102+
[1,1,0,0,0,1,1],
103+
[1,1,0,0,0,1,1],
104+
[0,1,1,1,1,1,0],
105+
[1,1,0,0,0,1,1],
106+
[1,1,0,0,0,1,1],
107+
[1,1,0,0,0,1,1],
108+
[1,1,0,0,0,1,1],
109+
[0,1,1,1,1,1,0]
110+
],//8
111+
[
112+
[0,1,1,1,1,1,0],
113+
[1,1,0,0,0,1,1],
114+
[1,1,0,0,0,1,1],
115+
[1,1,0,0,0,1,1],
116+
[0,1,1,1,0,1,1],
117+
[0,0,0,0,0,1,1],
118+
[0,0,0,0,0,1,1],
119+
[0,0,0,0,1,1,0],
120+
[0,0,0,1,1,0,0],
121+
[0,1,1,0,0,0,0]
122+
],//9
123+
[
124+
[0,0,0,0],
125+
[0,0,0,0],
126+
[0,1,1,0],
127+
[0,1,1,0],
128+
[0,0,0,0],
129+
[0,0,0,0],
130+
[0,1,1,0],
131+
[0,1,1,0],
132+
[0,0,0,0],
133+
[0,0,0,0]
134+
]//:
135+
];

‎炫酷时钟/test.html

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>小球掉落动画</title>
6+
<style>
7+
canvas{border: 1px solid #ccc;}
8+
</style>
9+
</head>
10+
<body>
11+
<canvas id="canvas">你的浏览器不支持canvas,请更换</canvas>
12+
<script src="digit.js"></script>
13+
<script>
14+
var ball = {x:512, y:100, r:20, g:2, vx:-4, vy:-10, color:"blue"}
15+
16+
window.onload = function() {
17+
var canvas = document.getElementById('canvas');
18+
canvas.width = 1024;
19+
canvas.height = 500;
20+
var context = canvas.getContext('2d');
21+
setInterval(function() {
22+
render(context);
23+
24+
upDate();
25+
}, 50)
26+
27+
}
28+
function upDate() {
29+
ball.x += ball.vx;
30+
ball.y += ball.vy;
31+
ball.vy += ball.g;
32+
33+
if(ball.y >= 500-ball.r) {
34+
ball.y = 500 - ball.r;
35+
ball.vy = - ball.vy*0.5;
36+
}
37+
38+
39+
}
40+
function render(ctx) {
41+
42+
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
43+
44+
ctx.fillStyle = ball.color;
45+
ctx.beginPath();
46+
ctx.arc(ball.x, ball.y, ball.r, 0, 2*Math.PI);
47+
ctx.closePath();
48+
ctx.fill();
49+
}
50+
51+
</script>
52+
</body>
53+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.