forked from printlin/dynamicPoint
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcanvas动态粒子.html
135 lines (127 loc) · 3.38 KB
/
canvas动态粒子.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas动态粒子</title>
</head>
<body>
<canvas id="can" width="500" height="500" style="margin: 10px;color:'#fff';">您不支持</canvas>
<button onclick="draw()">draw</button>
<button onclick="stop()">shop</button>
<script type="text/javascript">
var arr=new Array();
var length=0;
var isStop=false;
function draw(){
var can=document.getElementById("can");
var ctx=can.getContext("2d");
var width=window.getComputedStyle(can).width;
var height=window.getComputedStyle(can).height;
width=width.substring(0,width.length-2);
height=height.substring(0,height.length-2);
alert(width+" "+height);
ctx.strokeStyle = "#b3fff6";
ctx.fillStyle="#69eada";
for(var i=0;i<20;i++){
var x=getRandomNub(width);
var y=getRandomNub(height);
var color=getRandomColor();
//ctx.fillStyle=color;
ctx.fillRect(x,y,20,20);
var newPoint=getRandomPoint(x,y,width,height);
arr[length]={x:x,y:y,tox:newPoint.x,toy:newPoint.y,color:color};
length++;
}
var interval=setInterval(function(){
if(isStop){
window.clearTimeout(interval);
}else{
ctx.clearRect(0,0,width,height);
for(var i=0;i<length;i++){
var point=arr[i];
if(point.x==point.tox){
var newPoint=getRandomPoint(point.x,point.y,width,height);
point.tox=newPoint.x;
point.toy=newPoint.y;
}
movePoint(point,ctx);
}
linkPoint(ctx);
}
},100);
/*for(var i=1;i<=9;i++){
ctx.fillStyle="#f"+i+"5"+i+"c"+i;
ctx.fillRect(100+30*((i-1)%3),100+30*Math.floor((i-1)/3),30,30);
}*/
}
function linkPoint(ctx){
for(var i=0;i<length;i++){
var iP=arr[i];
for(var j=0;j<length;j++){
var jP=arr[j];
if(getDistance(iP.x,iP.y,jP.x,jP.y)<150){
ctx.beginPath();
ctx.moveTo(iP.x,iP.y);
ctx.lineTo(jP.x,jP.y);
ctx.stroke();
}
}
}
}
function movePoint(point,ctx){
var step=(Math.sqrt((point.toy-point.y)*(point.toy-point.y)+(point.tox-point.x)*(point.tox-point.x)))/10;
step=1;
var k=(point.toy-point.y)/(point.tox-point.x);
var b=point.y-k*point.x;
var newX=0;
var newY=0;
if(point.x<point.tox){
newX=point.x+step;
}else{
newX=point.x-step;
}
if(newX==point.x){
point.x=point.tox;
point.y=point.toy;
ctx.fillStyle=point.color;
ctx.fillRect(point.tox,point.toy,10,10);
return;
}
newY=k*newX+b;
point.x=newX;
point.y=newY;
//ctx.fillStyle=point.color;
ctx.fillRect(newX,newY,10,10);
/*ctx.beginPath();
ctx.moveTo(newX,newY);
ctx.lineTo(point.tox,point.toy);
ctx.stroke();*/
}
function getDistance(x1,y1,x2,y2){
return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
}
function getRandomNub(max){
var r=Math.random();
return Math.floor(max*r);
}
function getRandomColor(){
return "rgb("+getRandomNub(255)+","+getRandomNub(255)+","+getRandomNub(255)+")";
}
function getRandomPoint(x,y,wid,hei){
var newX=0,newY=0;
while(true){
newX=getRandomNub(wid);
newY=getRandomNub(hei);
if(Math.abs(newX-x)<50 || Math.abs(newX-y)<50){
}else{
break;
}
}
return {x:newX,y:newY};
}
function stop(){
isStop=!isStop;
}
</script>
</body>
</html>