-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathrain5.html
172 lines (134 loc) · 5.06 KB
/
rain5.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
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>那些年下过的大雨</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: #000;}
</style>
</head>
<body>
<a class="back" href="javascript:history.go(-1);">back</a>
<canvas></canvas>
<script>
MeteorRain = new function() {
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var cursor;
var canvas;
var context;
var particles = [];
var mouseX = 0;
var mouseY = 0;
this.init = function() {
canvas = document.querySelector("canvas");
if (canvas && canvas.getContext) {
context = canvas.getContext('2d');
document.addEventListener('mousemove', documentMouseMoveHandler, false);
document.addEventListener('mousedown', documentMouseDownHandler, false);
window.addEventListener('resize', windowResizeHandler, false);
createCursor();
windowResizeHandler();
loop();
}
}
function createCursor(position) {
var w = 300;
var h = 300;
if (!position) {
var pos = {
x: ( SCREEN_WIDTH - w ) * 0.5 + (Math.random() * w),
y: ( SCREEN_HEIGHT - h ) * 0.5 + (Math.random() * h)
}
var m = new Cursor();
m.position.x = pos.x;
m.position.y = pos.y;
cursor = m;
createParticles(m.position);
} else {
var m = new Cursor();
m.position.x = position.x;
m.position.y = position.y;
createParticles(m.position);
}
}
function createParticles(pos) {
for (var i = 0; i < 50; i++) {
var p = new Particle();
p.position.x = pos.x;
p.position.y = pos.y;
p.shift.x = pos.x;
p.shift.y = pos.y;
particles.push(p);
}
}
function documentMouseMoveHandler(event) {
mouseX = event.clientX;
mouseY = event.clientY;
}
function documentMouseDownHandler(event) {
createCursor({x: mouseX, y: mouseY});
}
function windowResizeHandler() {
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
canvas.style.position = 'absolute';
canvas.style.left = (window.innerWidth - SCREEN_WIDTH) * 0.5 + 'px';
canvas.style.top = (window.innerHeight - SCREEN_HEIGHT) * 0.5 + 'px';
}
function loop() {
requestAnimationFrame(loop);
// 不断绘制半透明画布，用来造成尾巴效果
context.fillStyle = 'rgba(0, 0, 0, 0.2)';
context.fillRect(0, 0, canvas.width, canvas.height);
var particle;
var i, j, ilen, jlen;
cursor.position.x += (mouseX - cursor.position.x)*0.1;
cursor.position.y += (mouseY - cursor.position.y)*0.1;
for (i = 0, ilen = particles.length; i < ilen; i++) {
particle = particles[i];
// 通过速度控制角度大小，用来控制流星划过时的速度
particle.angle += particle.speed;
// 以相同转动的速度向鼠标中心点不停的移动
particle.shift.x += (cursor.position.x - particle.shift.x) * particle.speed;
particle.shift.y += (cursor.position.y - particle.shift.y) * particle.speed;
// sin/cos 用来控制画圆
// orbit 半径轨道不断增加， force用来控制轨道系数，最低为0
// Math.sinx * (particle.orbit*particle.force) 表示以particle.orbit*particle.force为半径画圆
// 加上中心点坐标，造成不断围绕中心点旋转的效果
particle.position.x = particle.shift.x + Math.sin(i + particle.angle) * (particle.orbit*particle.force);
particle.position.y = particle.shift.y + Math.cos(i + particle.angle) * (particle.orbit*particle.force);
// 不断增加点的半径，最高为100
particle.orbit += (cursor.orbit - particle.orbit) * 0.01;
context.beginPath();
// 根据点所在的位置，随机颜色
context.fillStyle = "hsl("+((particle.position.x/canvas.width + particle.position.y/canvas.height) * 180) + ", 100%, 70%)";
context.arc(particle.position.x, particle.position.y, particle.size/2, 0, Math.PI*2, true);
context.fill();
}
}
}
function distanceBetween(p1,p2) {
var dx = p2.x - p1.x;
var dy = p2.y - p1.y;
return Math.sqrt(dx^2 + dy^2);
}
function Particle() {
this.size = 2 + Math.random()*4;
this.position = {x: 0, y: 0};
this.shift = {x: 0, y: 0};
this.angle = 0;
this.speed = 0.01 + Math.random()*0.02;
this.force = -(Math.random()*10);
this.orbit = 1;
}
function Cursor() {
this.orbit = 100;
this.position = {x: 0, y: 0};
}
MeteorRain.init();
</script>
</body>
</html>