canvas-实现拓扑图

https://www.cnblogs.com/xiaohualu/p/10383801.html  转载

http://www.jtopo.com/introduction-in-5-minutes.html 官网

https://blog.csdn.net/ilovepengqi/article/details/78989288  转一个实例

https://www.jianshu.com/p/e4dde83a7282

https://blog.csdn.net/linkedin_37345339/article/details/54598527

https://www.pianshen.com/article/369812234/

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             #canvas{
 8                 background: red;
 9             }
10         </style>
11     </head>
12     <body>
13         <canvas id="canvas" width="300" height="300"></canvas>
14         <script type="text/javascript" src="js/jTopo/jtopo-0.4.8-min.js" ></script>
15         <script type="text/javascript">
16             var canvas = document.getElementById('canvas'); 
17             var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
18             var scene = new JTopo.Scene(stage); // 创建一个场景对象
19             
20             var nodeFrom = new JTopo.Node("from");
21             nodeFrom.setLocation(50,50);
22             scene.add(nodeFrom);
23             
24             var nodeTo = new JTopo.Node("To");
25             nodeTo.setLocation(100,100);
26             scene.add(nodeTo);
27             
28             var link = new JTopo.Link(nodeFrom, nodeTo); // 增加连线
29             scene.add(link);
30         </script>
31     </body>
32 </html>

//下面是文本位置显示属性值汇总：

node.textPosition = 'Top_Center'; // 文本位置

Top_Left,Top_Rigth,Top_Center

Middle_Letf,Middle_Rigth,Middle_Center

Bottom_Left,Bottom,Rigth,Bottom_Center

 

 

 

posted @ 2020-05-07 15:46  杨柳春色  阅读(1456)  评论(0)  编辑  收藏  举报