-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (107 loc) · 3.42 KB
/
index.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
<html>
<head>
<title>
PiLiPaLa
</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<style>
/*
*/
canvas
{
display: block;
background: #000;
}
body {
margin: 0px;
}
</style>
<body>
<canvas id='canvas'></canvas>
</body>
<script>
//初始化画布属性
var cxt=canvas.getContext('2d');
var num=300;
var wW=0,wH=0;
var data = [];//存储粒子的数据属性
init();
window.onresize=function()
{
init();
}
document.onmousemove=function()
{
console.log("IQ=0");
}
function init()
{
wW = canvas.width=window.innerWidth;
wH = canvas.height=window.innerHeight;
console.log("窗口宽度="+wW);
console.log("窗口高度="+wH);
//生成随机圆 和 线的数据
for(var i=0;i<num;i++)
{
data[i]=
{
X:Math.random()*wW,
Y:Math.random()*wH,
sX:Math.random()*0.2-0.1,
sY:Math.random()*0.2-0.1,
arcSize:Math.random()*4
}
// createArc(data[i].X,data[i].Y);
}
console.log(data);
}
//生成圆
function createArc(x,y,size)
{
cxt.save();
cxt.beginPath();
cxt.fillStyle='#FFFFFF';
cxt.arc(x,y,size,Math.PI*2,false);
cxt.closePath();
cxt.fill();
cxt.restore();
}
//生成线条
function createLine(x1,y1,x2,y2)
{
var canvas = cxt;
canvas.strokeStyle = "rgba(255, 2255, 255, 0.2)";
canvas.lineWidth = 1;
canvas.beginPath();
canvas.moveTo(x1, y1);//设置起点
canvas.lineTo(x2, y2);//画线
canvas.closePath();
canvas.stroke();
}
function drawPath()
{
cxt.clearRect(0,0,wW,wH);
for(var i=0;i<num;i++)
{
data[i].X+=data[i].sX;
data[i].Y+=data[i].sY;
createArc(data[i].X,data[i].Y,data[i].arcSize);
//设置边界返回
if(data[i].X<0 || data[i].Y<0 || data[i].X>wW || data[i].Y>wH)
{
data[i].sX=-(data[i].sX);
data[i].sY=-(data[i].sY);
}
for(var j=i+1;j<num;j++)
{
if(Math.pow(data[i].X-data[j].X,2)+Math.pow(data[i].Y-data[j].Y,2)<75*75)
//可以连线
createLine(data[i].X,data[i].Y,data[j].X,data[j].Y);
}
}
}
setInterval(function(){ drawPath(); }, 1000/60);
</script>
</html>