文字是网页中最基本的元素，一般我们在网页上都是展示的静态文字，但是就效果来说，还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用，如果有某些关键的文字，可以通过这种动态的效果来提醒用户阅读。
动态效果图
这个 Demo 是不断重复地设置文字的大小和透明度，这些英文字母也是我自己利用 HT 的矢量绘制的，总的来说效果还是不错的。
代码实现
代码总共一百来行，比较简单，前面说过我的英文字母是用矢量绘制的，用矢量绘制图形的好处非常多，比如图片缩放不会失真，这样在不同的 Retina 显示屏上我也不需要提供不同尺寸的图片；还有就是用 JSON 的方式来描述矢量，格式比较简洁等等。
矢量图片
接下来绘制这些矢量图片（这里只拿出第一个 H 进行说明）：
{
"width": 10,//设置矢量的宽
"height": 10,//设置矢量的高
"comps": [//矢量图形的组件Array数组，每个数组对象为一个独立的组件类型，数组的顺序为组件绘制先后顺序
{
"type": "text",//文本类型
"text": "H",//文本内容
"color": "rgb(69,69,69)",//文本颜色
"align": "center",//文本在矢量中的对齐方式
"opacity": {//文本透明度
"func": "attr@text.opacity",//设置业务属性，对文本进行透明度的数据绑定
"value": 1//如果func中的值为空或者undefined，那么就直接用这个值
},
"clipDirection": "bottom",//裁切方向为“从上到下”
"rect": [//指定组件绘制在矢量中的矩形边界
0,//代表左上角坐标x
0,//代表左上角坐标y
10,//代表组件的width
10//代表组件的height
]
}]
}
绘制矢量图形是通过 JSON 格式来书写的，主要的参数有三个：width、height 以及 comps。这三个参数都必须要写上，其中 width 为矢量图形的宽度，height 为矢量图形的高度，comps 里面是一个 Array 数组，数组中是一个个独立的对象，可以对这个对象设置一些预定义参数，也可设置一些可选的参数信息。
这里我将所有的文本信息存储在一个数组中，方便调用：
arr = [
{label: 'H', image: 'symbols/H.json'},
{label: 'T', image: 'symbols/T.json'},
{label: 'f', image: 'symbols/f.json'},
{label: 'o', image: 'symbols/o.json'},
{label: 'r', image: 'symbols/r.json'},
{label: 'W', image: 'symbols/W.json'},
{label: 'e', image: 'symbols/e.json'},
{label: 'b', image: 'symbols/b.json'},
];
第一个 label 对象为矢量图形的名称，第二个 image 对象我们设置的是 json 格式的图片，但是实际上可以为 img、canvas 对象或图片 url 或 base64 字符串。
创建节点对象
对象的图片已经生成，接下来就是创建对象了，这里英文字母总共 8 个，那么我们创建 8 个节点对象：
var s = 80;
arr.forEach(function(obj, index) {
var text = obj.label;
name = 't' + text;
window[name] = createNode(obj.image, 100+s*index, 100);
});
function createNode(image, x, y) {//节点对象声明
var node = new ht.Node();//这个类为 ht 中定义的节点
node.setSize(0, 0);//设置节点大小
if(image) node.setImage(image);//设置节点图片
if(x && y) node.setPosition(x, y);//设置节点摆放位置
dm.add(node);//将节点添加进数据容器 datamodel 中
return node;
}
关于上面的 ht.Node 节点的生成，其实这个只是 HT 封装好的类，这个类上面有很多很方便的 API。然后将这个生成的节点添加进数据容器 dm 中，这个数据容器又是整个拓扑图 gv 的数据容器。
拓扑图生成
来看看如何生成这个拓扑图吧：
dm = new ht.DataModel();//数据容器
gv = new ht.graph.GraphView(dm);//拓扑图 通过 gv.getView() 可获得这个拓扑图的底层 div
gv.addToDOM();//将 gv 添加进 body 中
实际上 HT 的原理就是在一个 div 中的 canvas 上绘制图形，也就是说这个 gv 就是一个 canvas。
然后通过 getView 获取这个 canvas 的底层 div，这样我们就能将这个 div 添加到 html 页面的任何地方了，addToDOM 的定义如下：