如何使用HTML5 Canvas动态的绘制拓扑图

具体想要什么样的效果，简单的点击生成线和节点很简单，调用rect，lineto，arc就能完成；如果要在生成的框内加文字就需要text方法，点击生成时将rect的起始点存在一个数组里；

然后最好在外面设置一个input框，然后每次生成之后，需要input输入节点的内容，

最后设置一个右键事件表示事件结束。置于焦点和交点处逻辑也要考虑到。

1.各个应用系统、服务器信息及系统直接的调用都录入到数据库中

2.前端拓扑图、或系统调用关系图的展示UI可以通过一些选项从数据库中捞出数据，然后在UI上动态绘制出关系图来

3.如HTML5 Canvas或基于HTML5 Canvas的JTopo、SVG都可以很好的绘制出这种图来。

---