Skip to content

Instantly share code, notes, and snippets.

@ckeyer

ckeyer/index.html

Created December 20, 2016 13:30
Show Gist options
  • Save ckeyer/fe9e0135be229479e2d53821ead2afbf to your computer and use it in GitHub Desktop.
Save ckeyer/fe9e0135be229479e2d53821ead2afbf to your computer and use it in GitHub Desktop.
Download ZIP
线性网络连接图
Raw
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
</head>
<body>
<canvas id="myDraw" >
A drawing of something...
</canvas>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="line.js" type="text/javascript"></script>
</body>
</html>
Raw
line.js
window.onload = myDrawing;
// 画布范围
var ScopeX = $(window).get(0).innerWidth - 40;
var ScopeY = $(window).get(0).innerHeight - 20;
const PointCol = 'rgba(255,0,0,1)';
const RefreshTime = 30;
const PointCount = 100;
var points = [];
function randN(n) {
return Math.ceil(Math.random()*n)
};
var Point = {
New: function (context, x, y, size, sx, sy) {
var col = 'rgba(214, 230, 133, 1)';
switch (randN(4)) {
case 1:
col = 'rgba(68, 163, 64, 1)';
break;
case 2:
col = 'rgba(140, 198, 101, 1)';
break;
case 3:
col = 'rgba(30, 104, 35, 1)';
break;
}
var p = {
X: x,
Y: y,
size: size,
speedX: sx,
speedY: sy,
ctx: context,
color: col,
move: function () {
p.X += p.speedX;
p.Y += p.speedY;
if (!p.isOut()) {
p.draw();
}
},
draw: function () {
p.ctx.beginPath();
p.ctx.fillStyle = p.color;
p.ctx.strokeStyle = p.color;
p.ctx.arc(p.X, p.Y, p.size, 0, 2*Math.PI);
p.ctx.closePath();
p.ctx.fill();
p.ctx.stroke();
},
lineTo: function (p2) {
if (p.isMixed(p2)) {
p.ctx.beginPath();
p.setLineStyle(p2);
p.ctx.moveTo(p.X, p.Y);
p.ctx.lineTo(p2.X, p2.Y);
p.ctx.stroke();
}
},
setLineStyle: function (p2) {
var dist = p.distance(p2);
var size = (p.size+p2.size)/2;
var lineWidth = (size/dist*10>5) ? 5 : size/dist*10;
p.ctx.strokeStyle = 'rgba(0,0,0,'+((1+lineWidth)/6)+')';
p.ctx.lineWidth = lineWidth;
},
distance: function (p2) {
var wx = p.X - p2.X;
var hy = p.Y - p2.Y;
return Math.sqrt(wx*wx + hy*hy);
},
isOut: function () {
return p.X<-5 || p.Y<-5 || p.X>ScopeX || p.Y>ScopeY;
},
isMixed: function (p2) {
return p.distance(p2) < (p.size + p2.size)*20;
},
};
return p;
}
};
function myDrawing() {
var drawing = document.getElementById("myDraw");
if (!drawing.getContext("2d")) {
return;
};
drawing.setAttribute('width', ScopeX);
drawing.setAttribute('height', ScopeY);
var ctx = drawing.getContext("2d");
console.log('start.');
points = [
Point.New(ctx, 20, 20, 5, 2, 5),
Point.New(ctx, 50, 10, 5, 2, 3),
];
rangeDraw(ctx)();
}
function rangeDraw(context) {
var ctx = context;
return function () {
addPoints(ctx);
ctx.clearRect(0, 0, ScopeX+20, ScopeY+20);
for (var i in points) {
var p = points[i];
if (p.isOut()) {
points.splice(i, 1);
continue;
}
p.move();
}
for (var i = points.length - 1; i >= 1; i--) {
var p1 = points[i];
for (var j = i - 1; j >= 0; j--) {
p1.lineTo(points[j]);
}
}
if (points.length > 0) {
setTimeout(rangeDraw(ctx), RefreshTime);
}
}
}
function addPoints(ctx) {
if (points.length < PointCount) {
var ori = randN(2)==2? -1:1;
var rsx = randN(3);
var rsy = randN(3) * ori;
points.push(Point.New(ctx, 0, randN(ScopeY), randN(3)+2, rsx, rsy));
ori = randN(2)==2? -1:1;
rsx = randN(3) * -1;
rsy = randN(3) * ori;
points.push(Point.New(ctx, ScopeX, randN(ScopeY), randN(3)+2, rsx, rsy));
ori = randN(2)==2? -1:1;
rsx = randN(3) * ori;
rsy = randN(3);
points.push(Point.New(ctx, randN(ScopeX), 0, randN(3)+2, rsx, rsy));
ori = randN(2)==2? -1:1;
rsx = randN(3) * ori;
rsy = randN(3) * -1;
points.push(Point.New(ctx, randN(ScopeX), ScopeY, randN(3)+2, rsx, rsy));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment