forked from Rynxiao/The-heavy-rain-in-those-years
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrain3.html
76 lines (66 loc) · 1.66 KB
/
rain3.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>那些年下过的大雨3</title>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="lib/font/stylesheet.css">
<style>
body {
background-color:black;
}
#c {
opacity:.8;
}
canvas {
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<a class="back" href="javascript:history.go(-1);">back</a>
<canvas id="c"></canvas>
<canvas id="bg"></canvas>
<script>
//initial
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext('2d'),
//parameters
total = w,
accelleration = .05,
//afterinitial calculations
size = w/total,
occupation = w/total,
repaintColor = 'rgba(0, 0, 0, .04)'
colors = [],
dots = [],
dotsVel = [];
//setting the colors' hue
//and y level for all dots
var portion = 360/total;
for(var i = 0; i < total; ++i){
colors[i] = portion * i;
dots[i] = h;
dotsVel[i] = 10;
}
function anim(){
window.requestAnimationFrame(anim);
ctx.fillStyle = repaintColor;
ctx.fillRect(0, 0, w, h);
for(var i = 0; i < total; ++i){
var currentY = dots[i] - 1;
dots[i] += dotsVel[i] += accelleration;
ctx.fillStyle = 'hsl('+ colors[i] + ', 80%, 50%)';
ctx.fillRect(occupation * i, currentY, size, dotsVel[i] + 1);
if(dots[i] > h && Math.random() < .01){
dots[i] = dotsVel[i] = 0;
}
}
}
anim();
</script>
</body>
</html>