目前在做的项目是渔政的监控，需要用到的设备包括雷达，光电，站点信息等，想要更直观的展现设备之间的连接关系和状态信息，这时候需要画一张拓扑图

在做拓扑图之前，首先要学习一下，html里面另一个比较常用的标签--<Canvas>

 <canvas> 标签定义图形，通过脚本 (通常是JavaScript)来完成，意思即，canvas只是提供一个容器，元素本身是没有绘图能力的，真正形成图形，还是需要通过脚本语言去绘制

知道了这个标签的含义及用法之后，开始网络拓扑图的绘制

首先找到一个开源且免费的拓扑图形包，，前面我写了一个，里面写了两个示例，基本上就可以完成这次拓扑图的设计，我将步骤拆分一下：

首先加载场景：

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;        }

然后根据需求生成节点连接即可，效果如下图所示：

　

完整代码如下：

 

2017.9.19日更新：

我写页面一般是用JS写，CSS渲染,在JSP页面中加载，使用过程中发现一个问题，就是给canvas设置属性时，无论是通过CSS渲染还是直接通过style属性添加，JTopo都会出现bug，图像失真且无法拖动，所以建议如果通过JS来编写页面的前端同事，直接通过对象.height/width属性来添加，末尾也无需添加"px“字符串