【摘要】 市场上绘制网络拓扑图的软件很多，如Visio、亿图等，通过这些图形绘制软件，可以非常方便的绘制各种专业的业务流程图、工程管理图、网络拓扑图、 etc. 但上述软件是基于C/S结构的，具有升级难、扩展性差的特点。 基于Web的图形绘图软件主要有三种技术：flash、HTML5 Canvas、SilverLight技术。 其中flash和SilverLight需要安装插件，已经逐渐被市场淘汰。 在HTML5出来之前游戏引擎架设拓扑，Web客户端使用SVG技术来完成绘图，但是这种技术不能满足复杂绘图的需要。 HTML5是新一代的HTML标准，它提供了Canvas标签和一系列的JavaScript API来实现绘图功能。 目前市场上基于HTML5技术的数据可视化组件多为图表组件，很少有拓扑图和流程图组件。 利用HTML5中的Canvas技术，将拓扑结构图以JSON格式表示，开发了一套标准的拓扑图绘制引擎。 通过配置JSON数据，可以生成一组拓扑图。 开发者不需要编写复杂的图形化程序来提高代码重用率，从而大大提高软件开发速度，具有一定的实用价值。 本文从研究Web拓扑图绘制的功能需求出发游戏引擎架设拓扑3D动画，提出了一种使用HTML5 Canvas技术的开发系统。 开发技术和JavaScript面向对象技术，设计系统架构。 (2)认真分析拓扑图的对象系统，设计拓扑图绘制的业务对象，给出类图。 设计了绘图程序的数据结构，定义了绘图程序的JSON数据。 (3)根据绘图程序的特点，采用单例模式、工厂模式、命令模式、状态模式、观察者模式等多种面向对象的设计模式游戏动态，降低程序的复杂度。 (4)完成与服务器的数据接口设计，数据格式采用JSON格式，通过AJAX技术访问Web服务器，符合SOA架构。 (5) 同时，通过精心的编码过程，完成了基于HTML5的拓扑图绘制引擎系统的开发与实现，并将该绘制引擎应用于某公司的实际项目中。 (6) 对系统进行了相应的测试，测试结果表明系统运行可靠，可扩展性强，与公司业务数据无缝对接，满足设计预期。
