python实现点线拓扑图_Canvas 点和连线/网络拓扑图

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var links = [];

var links_count = 32;

var connects_time = 240;

var connects_count = 2;

var theme_start = {

X: 150,

Y: 150,

W: 300,

H: 300

};

function limit_number(min, cur, max) {

if (cur < min) return min;

if (cur > max) return max;

return cur;

}

function print_rgba(r, g, b, a) {

return "rgba(" + r + "," + g + "," + b + "," + a + ")";

}

function Linker() {

var connects = [];

for (var i = 0; i < connects_count; i++) connects.push(Connector());

var start_x = Math.random() * theme_start.W;

var start_y = Math.random() * theme_start.H;

return {

X: start_x,

Y: start_y,

TX: start_x,

TY: start_y,

NewJob: function() {

var tx = this.X + Math.random() * 200 - 100;

var ty = this.Y + Math.random() * 200 - 100;

this.TX = limit_number(Math.random() * 50, tx, theme_start.W - Math.random() * 50);

this.TY = limit_number(Math.random() * 50, ty, theme_start.H - Math.random() * 50);

},

Moving: function() {

return Math.sqrt(Math.pow(this.TX - this.X, 2) + Math.pow(this.TY - this.Y, 2)) > 1;

},

Connectors: connects

};

}

function Connector() {

return {

Time: -1,

Target: null,

NewJob: function() {

this.Target = Math.floor(Math.random() * links_count);

this.Time = Math.random() * connects_time;

}

};

}

function init() {

for (var i = 0; i < links_count; i++) links.push(Linker());

window.requestAnimationFrame(draw);

}

function draw() {

for (var i = 0; i < links_count; i++) {

if (!links[i].Moving()) links[i].NewJob();

links[i].X += (links[i].TX - links[i].X) / 24;

links[i].Y += (links[i].TY - links[i].Y) / 24;

for (var j = 0; j < links[i].Connectors.length; j++) {

if (links[i].Connectors[j].Time < 0) links[i].Connectors[j].NewJob();

links[i].Connectors[j].Time -= 1;

}

}

var canvas = document.getElementById('frame');

if (canvas.getContext) {

var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

ctx.globalCompositeOperation = 'destination-over';

ctx.clearRect(0, 0, theme_start.W, theme_start.H);

ctx.strokeStyle = "#5577A2";

ctx.fillStyle = "#5577A2";

for (var i = 0; i < links_count; i++) {

for (var j = 0; j < links[i].Connectors.length; j++) {

var connect = links[links[i].Connectors[j].Target];

var linesPath = new Path2D();

linesPath.moveTo(links[i].X, links[i].Y);

linesPath.lineTo(connect.X, connect.Y);

ctx.strokeStyle = print_rgba(85, 119, 162, limit_number(.3, links[i].Connectors[j].Time / 100, 1));

ctx.stroke(linesPath);

}

}

var arcPath = new Path2D();

for (var i = 0; i < links_count; i++) {

arcPath.moveTo(links[i].X, links[i].Y);

arcPath.arc(links[i].X, links[i].Y, 4, 0, Math.PI * 2, true);

}

ctx.fill(arcPath);

ctx.stroke(arcPath);

}

window.requestAnimationFrame(draw);

}

init();