拓扑图框架Jtopo

使用HTML5制作网络拓扑图的方式有主要有Canvas和SVG，Jtopo采用HTML5的Canvas实现，可以使用到Html5的平台(PC，手机，平板)，免费易用，适用于浏览器IE, Firefox, Safari,Chrome等

开发流程：

1.引入jtopo.js文件

<script type="text/javascript" src="js/jtopo-min.js"></script>

2.Canvas标签定义拓扑图

<canvas width="910" height="400" id="canvas"></canvas>

3.绘制拓扑图

 $(document).ready(function(){                                var canvas = document.getElementById('canvas');            var stage = new JTopo.Stage(canvas);//创建舞台对象            var scene = new JTopo.Scene(stage);  //创建场景对象              scene.alpha = 1;                                    //加节点            function addNode(text, color){                var node = new JTopo.Node();                node.setImage('./img/topo/'+ color +'.png', true);                node.fontColor = '0,0,0';                scene.add(node);                                node.mouseover(function(){                    this.text = text;                });                node.mouseout(function(){                    this.text = null;                });                return node;            }                                   //连线            function addLink(nodeA, nodeZ){                var link = new JTopo.FlexionalLink(nodeA, nodeZ);                link.strokeColor = '204,204,204';                link.lineWidth = 1;                scene.add(link);                return link;            }                        var rootNode = addNode('root', 'gray');                        var icons = ['green', 'blue', 'red1', 'red2'];            for(var i=0; i<icons.length; i++){                            var node = addNode('second_' + i, icons[i]);                    addLink(rootNode, node);                            if(i == 0 || i == icons.length - 1){                    for(var j=0; j<4; j++){                        var thirdNode = addNode('third_' + j, 'green');                        addLink(node, thirdNode);                      }                }            }                        // 树形布局            scene.doLayout(JTopo.layout.TreeLayout('down', 30, 107));        });