基于Canvas的Web图形异步树的设计与实现

李文艳

摘要：在Web系统开发中，基于Ajax的用树形结构展示数据被广泛应用，为了能更清晰的反应数据之间的关系，对基于Canvas 的Web图形异步树的设计与实现进行了探讨。

关键词：Canvas；图形；异步树

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2016）23-0183-02

1 引言

随着 Ajax的普及应用，现今出现了许多优秀的 Ajax技术框架，如：Ext，Jquery，EasyUI 等[1]无论是在web系统开发中还是数据分析中，树形结构都是一种常见的数据结构模型， 例如网站中常见的导航菜单，easyui中的树的控件等。 使用树形结构可以使层次更加明确，逻辑清晰，并且能够快速定位，下文对基于canvas 的web图形异步树做了设计与实现。

2 html5中的canvas

Html5的新功能包括 多媒体支持，canvas，本地存储，离线Web应用。地理位置，智能化表单。本文主要利用canvas实现图形异步树。对于canvas的兼容性，随着IE9的到来，所有的浏览器厂商都提供了对html5 Canvas的支持，而且它已被大多数用户所掌握。[2]

3 web图形异步树的设计与实现

Web图像异步树的大体逻辑是，封装相关画图的函数，然后在页面载入时利用ajax中的get方法从后台返回json数据，根据返回数据之间的关系，调用画图函数画图。

下面介绍canvas画图，首先检测当浏览器不支持canvas的时候显示的文字直接写在canvas标签内。关于画圆的函数，参数为圆的x坐标，层数，圆上显的文字，最后返回json数据，即圆的坐标。这里选取圆的半径为30px，为了使得圆看起来有立体感，需要设置每个圆的渐变，颜色随机，圆内文字样式，给每个圆设置点击事件，因为canvas图像不支持点击事件，本实例设置body为相对定位，在生成圆的时候在圆生成的位置动态添加div并设置div的定位为绝对定位，根据圆的坐标设置div的left和top，当然需要在css中设置每个div透明并且做浏览器兼容，css代码如下：

4 结束语

为了支持web树的高度超过屏幕高度，可以设置当树的高度小于屏幕的高度的时候，设置canvas的高度为屏幕的高度，大于屏幕的高度设置canvas的高度为树的高度，宽度同理。本文通过一个具体的实例，展示了利用html5中的canvas画图更加清晰的展示树形结构中数据之间的关系。这种树形结构可以帮助企业更好的分析分类的数据，提高了用户体验。

参考文献：

[1] 戴维，蒋玉芳.基于Ajax 技术实现 web 异步村的应用研究[J].计算机与现代化 2011，2：148-149.

[2] 柳伯斯，等.HTML5程序设计[M].北京：人民邮电出版社，2012.

[3] 李祁，李瑛，陈青华.基于Ajax 的动态树状菜单的设计及实现[J].电子设计工程，2011，19：52-54.