李文艳

摘要：在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为相对定位，在……