-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathpingbao.html
118 lines (94 loc) · 1.96 KB
/
pingbao.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
html{ overflow:hidden;}
body{ background:#000;}
#c{ background:#000;}
</style>
<script>
function rnd(n,m){
return Math.floor(Math.random()*(m-n)+n);
}
window.onload=function(){
var oC=document.getElementById('c');
var gd=oC.getContext('2d');
var winW=window.innerWidth;
var winH=window.innerHeight;
oC.width=winW;
oC.height=winH;
var N=5;
var aPoint=[];
for(var i=0;i<N;i++){
aPoint[i]={
w:1,
h:1,
x:rnd(0,winW),
y:rnd(0,winH),
speedX:rnd(-10,10),
speedY:rnd(-10,10)
};
}
var oldPoint=[];
setInterval(function(){
gd.clearRect(0,0,oC.width,oC.height);
for(var i=0;i<N;i++){
drawPoint(aPoint[i]);
aPoint[i].x +=aPoint[i].speedX;
aPoint[i].y +=aPoint[i].speedY;
if(aPoint[i].x<0){
aPoint[i].speedX *=-1;
}
if(aPoint[i].x>winW){
aPoint[i].speedX *=-1;
}
if(aPoint[i].y<0){
aPoint[i].speedY *=-1;
}
if(aPoint[i].y>winH){
aPoint[i].speedY *=-1;
}
}
gd.beginPath();
gd.moveTo(aPoint[0].x,aPoint[0].y);
for(var i=1;i<N;i++){
gd.lineTo(aPoint[i].x,aPoint[i].y);
}
gd.closePath();
gd.strokeStyle='red';
gd.stroke();
var arr=[];
for(var i=0;i<N;i++){
arr.push({x:aPoint[i].x,y:aPoint[i].y});
}
oldPoint.push(arr);
while(oldPoint.length>10){
oldPoint.shift();
}
for(var i=0;i<oldPoint.length;i++){
gd.beginPath();
gd.moveTo(oldPoint[i][0].x,oldPoint[i][0].y);
for(var j=1;j<N;j++){
gd.lineTo(oldPoint[i][j].x,oldPoint[i][j].y);
}
gd.closePath();
var opacity=i/oldPoint.length;
gd.strokeStyle='rgba(255,0,0,'+opacity+')';
gd.stroke();
}
},16);
function drawPoint(p){
gd.fillStyle='#fff';
gd.fillRect(p.x,p.y,p.w,p.h);
gd.strokeRect(p.x,p.y,p.w,p.h);
};
};
</script>
</head>
<body>
<canvas id="c"></canvas>
</body>
</html>