1
<canvas id="canvas"></canvas>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
 var total = 100;
 var size = 5; //半径
 var x;
 var y;
 var arr = []; //点路径
 var oldPoint;
 var PI = Math.PI;
 var canvas = document.getElementById('canvas');
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 var ctx = canvas.getContext("2d");
 ctx.strokeStyle = 'rgba(255,255,255,1)';
 ctx.fillStyle = 'rgba(255,255,255,.5)';
 ctx.lineWidth = 1;
 var opa = 0;
 vy = 25;
 vx = 0;
 gravity = 0.005;
 function distance(x1, y1, x2, y2) {
     return Math.sqrt(Math.abs(x1 - x2) * Math.abs(x1 - x2) + Math.abs(y1 - y2) * Math.abs(y1 - y2));
 }
 //画点
 for (var i = 0; i < total; i++) {
     var xx = Math.random() * canvas.width;
     var yy = Math.random() * canvas.height;
     arr.push({
         x: xx,
         y: yy
     });
     ctx.beginPath();
     ctx.arc(xx, yy, size, 0, 2 * PI);
     ctx.fill();
     ctx.save();
 }
 oldPoint = arr;
 function drawPoint() {
     $.each(arr, function(i, m) {
         ctx.beginPath();
         ctx.arc(m.x, m.y, size, 0, 2 * PI);
         ctx.fill();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX