李文艷

摘要：在Web系統(tǒng)開發(fā)中，基于Ajax的用樹形結構展示數(shù)據(jù)被廣泛應用，為了能更清晰的反應數(shù)據(jù)之間的關系，對基于Canvas 的Web圖形異步樹的設計與實現(xiàn)進行了探討。

關鍵詞：Canvas；圖形；異步樹

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2016）23-0183-02

1 引言

隨著 Ajax的普及應用，現(xiàn)今出現(xiàn)了許多優(yōu)秀的 Ajax技術框架，如：Ext，Jquery，EasyUI 等[1]無論是在web系統(tǒng)開發(fā)中還是數(shù)據(jù)分析中，樹形結構都是一種常見的數(shù)據(jù)結構模型， 例如網站中常見的導航菜單，easyui中的樹的控件等。 使用樹形結構可以使層次更加明確，邏輯清晰，并且能夠快速定位，下文對基于canvas 的web圖形異步樹做了設計與實現(xiàn)。

2 html5中的canvas

Html5的新功能包括 多媒體支持，canvas，本地存儲，離線Web應用。地理位置，智能化表單。本文主要利用canvas實現(xiàn)圖形異步樹。對于canvas的兼容性，隨著IE9的到來，所有的瀏覽器廠商都提供了對html5 Canvas的支持，而且它已被大多數(shù)用戶所掌握。[2]

3 web圖形異步樹的設計與實現(xiàn)

Web圖像異步樹的大體邏輯是，封裝相關畫圖的函數(shù)，然后在頁面載入時利用ajax中的get方法從后臺返回json數(shù)據(jù)，根據(jù)返回數(shù)據(jù)之間的關系，調用畫圖函數(shù)畫圖。

下面介紹canvas畫圖，首先檢測當瀏覽器不支持canvas的時候顯示的文字直接寫在canvas標簽內。關于畫圓的函數(shù)，參數(shù)為圓的x坐標，層數(shù)，圓上顯的文字，最后返回json數(shù)據(jù)，即圓的坐標。這里選取圓的半徑為30px，為了使得圓看起來有立體感，需要設置每個圓的漸變，顏色隨機，圓內文字樣式，給每個圓設置點擊事件，因為canvas圖像不支持點擊事件，本實例設置body為相對定位，在生成圓的時候在圓生成的位置動態(tài)添加div并設置div的定位為絕對定位，根據(jù)圓的坐標設置div的left和top，當然需要在css中設置每個div透明并且做瀏覽器兼容，css代碼如下：

4 結束語

為了支持web樹的高度超過屏幕高度，可以設置當樹的高度小于屏幕的高度的時候，設置canvas的高度為屏幕的高度，大于屏幕的高度設置canvas的高度為樹的高度，寬度同理。本文通過一個具體的實例，展示了利用html5中的canvas畫圖更加清晰的展示樹形結構中數(shù)據(jù)之間的關系。這種樹形結構可以幫助企業(yè)更好的分析分類的數(shù)據(jù)，提高了用戶體驗。

參考文獻：

[1] 戴維，蔣玉芳.基于Ajax 技術實現(xiàn) web 異步村的應用研究[J].計算機與現(xiàn)代化 2011，2：148-149.

[2] 柳伯斯，等.HTML5程序設計[M].北京：人民郵電出版社，2012.

[3] 李祁，李瑛，陳青華.基于Ajax 的動態(tài)樹狀菜單的設計及實現(xiàn)[J].電子設計工程，2011，19：52-54.