目前在做的项目是渔政的监控，需要用到的设备包括雷达，光电，站点信息等，想要更直观的展现设备之间的连接关系和状态信息，这时候需要画一张拓扑图
在做拓扑图之前，首先要学习一下，html里面另一个比较常用的标签--<Canvas>
<canvas> 标签定义图形，通过脚本 (通常是JavaScript)来完成，意思即，canvas只是提供一个容器，元素本身是没有绘图能力的，真正形成图形，还是需要通过脚本语言去绘制
知道了这个标签的含义及用法之后，开始网络拓扑图的绘制
首先找到一个开源且免费的拓扑图形包，Jtopo，前面我写了一个JTopo的使用心得，里面写了两个示例，基本上就可以完成这次拓扑图的设计，我将步骤拆分一下：
首先加载场景：
var canvas = document.getElementById(\'canvas\');
var stage = new JTopo.Stage(canvas);
var scene = new JTopo.Scene();
编写两个函数，用来定义Node和Link的属性，传入参数即可生成节点：
//定义生成节点函数
function node(x, y, img,name,height,width){
var node = new JTopo.Node(name);
node.setImage(\'img/control/\' + img, true);
node.setLocation(x, y);
node.setSize(height,width);
scene.add(node);
return node;
}
//定义连线函数
function linkNode(nodeA, nodeZ,color){
var link = new JTopo.FoldLink(nodeA, nodeZ);
link.lineWidth = 3;
link.strokeColor = color;
scene.add(link);
return link;
}
然后根据需求生成节点连接即可，效果如下图所示：
完整代码如下：
<html>
<head>
<title>Demo</title>
<meta charset="UTF-8">
<link href="css/jquery.snippet.min.css">
<script type="text/javascript" src="htforweb/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="htforweb/jquery.js"></script>
<script type="text/javascript" src="htforweb/jquery.snippet.min.js"></script>
<script type="text/javascript" src="htforweb/jtopo-min.js"></script>
</head>
<body>
<script>
//动态生成拓扑图
$(document).ready(function(){
var canvas = document.getElementById(\'canvas\');
var stage = new JTopo.Stage(canvas);
var scene = new JTopo.Scene();
//定义生成节点函数
function node(x, y, img,name,height,width){
var node = new JTopo.Node(name);
node.setImage(\'img/control/\' + img, true);
node.setLocation(x, y);
node.setSize(height,width);
scene.add(node);
return node;
}
//定义连线函数
function linkNode(nodeA, nodeZ,color){
var link = new JTopo.FoldLink(nodeA, nodeZ);
link.lineWidth = 3;
link.strokeColor = color;
scene.add(link);
return link;
}
var r1 = node(40, 40,\'satellite_antenna.png\',\'XX站\',50,30);
var r2 = node(40, 110, \'satellite_antenna.png\',\'XX站\',50,30);
var r3 = node(40, 180,\'satellite_antenna.png\',\'XX站\',50,30);
var r4 = node(40, 300,\'satellite_antenna.png\', \'XX站\',50,30);
var r5 = node(40, 370,\'satellite_antenna.png\',\'XX站\',50,30);
var r6 = node(40, 440,\'satellite_antenna.png\',\'XX站\',50,30);
var r7 = node(200, 350,\'terminal.png\',\'XX分中心\',50,70);
var r8 = node(400, 270, \'nation.png\',\'南京中心\', 900,400);
linkNode(r1, r8,\'26,191,94\');
linkNode(r2, r8,\'206,8,101\');
linkNode(r3, r8,\'26,191,94\');
linkNode(r4, r7,\'26,191,94\');
linkNode(r5, r7,\'26,191,94\');
linkNode(r6, r7,\'26,191,94\');
linkNode(r7, r8,\'26,191,94\');
var r9 = node(600, 50, \'host.png\',\'XX局\',60,40);
var r10 = node(600, 110, \'host.png\',\'XX局\',60,40);
var r11 = node(600, 170, \'host.png\',\'XX局\',60,40);
var r12 = node(600, 230,\'host.png\', \'XX局\',60,40);
var r13 = node(600, 290,\'host.png\', \'XX局\',60,40);
var r14 = node(600, 350, \'host.png\',\'XX局\',60,40);
var r15 = node(600, 410, \'host.png\',\'XX局\',60,40);
linkNode(r9, r8,\'26,191,94\');
linkNode(r10, r8,\'26,191,94\');
linkNode(r11, r8,\'26,191,94\');
linkNode(r12, r8,\'26,191,94\');
linkNode(r13, r8,\'26,191,94\');
linkNode(r14, r8,\'26,191,94\');
linkNode(r15, r8,\'26,191,94\');
stage.add(scene);
});
</script>
<canvas width="1000" height="800" id="canvas" style=" background-color:#EEEEEE; border:1px solid #444;">
</canvas>
</body>
</html>
2017.9.19日更新：
我写页面一般是用JS写，CSS渲染,在JSP页面中加载，使用过程中发现一个问题，就是给canvas设置属性时，无论是通过CSS渲染还是直接通过style属性添加，JTopo都会出现bug，图像失真且无法拖动，所以建议如果通过JS来编写页面的前端同事，直接通过对象.height/width属性来添加，末尾也无需添加"px“字符串