TagCanvas 是一个基于HTML5Canvas技术开发的标签云动画。还提供一个以jQuery插件形式实现的版本。它支持文本和图片两种格式,能够以 Sphere, hcylinder 或 vcylinder 三种形状显示。TagCanvas 还支持IE浏览器(利用 ExplorerCanvas 实现)。
TagCanvas是一个 Javascript 类绘制和动画 HTML5 Canvas 技术开发的标签云动画，还提供一个以jQuery 插件形式实现的版本。
参数说明：
选项默认说明
interval20动画帧之间的间隔，以毫秒为单位
maxSpeed0.05最大旋转速度
minSpeed0.0鼠标离开画布时的最小旋转速度
decel0.95鼠标离开画布时的减速率
minBrightness0.1最远点的标签亮度(0.0-1.0)
textColour"#ff99ff"标记文本的颜色
textHeight15标记文本字体的高度(以像素为单位)
textFont"Helvetica, Arial, sans-serif"标签文本的字体系列
outlineColour"#ffff99"活动标签周围的框的颜色
outlineThickness2轮廓的粗细(以像素为单位)
outlineOffset5轮廓与文本的距离，以像素为单位
pulsateTo1.0"脉动轮廓不透明度(0.0 - 1.0)
pulsateTime3脉搏率，以每秒的秒数为单位
depth0.5控制透视(0.0-1.0)
initialnull初始旋转，水平和垂直为数组，例如[0.8，-0.3。值乘以maxSpeed。
freezeActiveFALSE设置为true以在突出显示标记时暂停移动。
frontSelectFALSE设置为true以防止在云后面选择标记。
txtOptTRUE文本优化，将文本标签转换为图像以获得更好的性能。
txtScale2在txtOpt模式下转换为图像时文本的缩放系数。
reverseFALSE设置为true以反转相对于鼠标位置的移动方向。
hideTagsFALSE如果TagCanvas成功启动，则设置为true以自动隐藏标记列表元素。
zoom1调整画布中标签云的相对大小。较大的值将放大到云，较小的值将缩小。
wheelZoomTRUE使用鼠标滚轮或滚动手势可以放大和缩小云。
zoomStep0.05每次移动鼠标滚轮时缩放变焦量。
zoomMax3最大缩放值。
zoomMin0.3最小缩放值。
shadow"#000000"每个标签后面阴影的颜色。
shadowBlur0标记阴影模糊量，以像素为单位。
shadowOffset[0,0]标记阴影的X和Y偏移量，以像素为单位。
weightFALSE设置为true以打开标签的权重。
weightMode"size"用于显示标记权重的方法。应该是尺寸，颜色或两者之一。
weightSize1用于在使用大小或两者的重量模式时调整标签大小的乘数。
weightGradient{0:'#f00', 0.33:'#ff0', 0.66:'#0f0', 1:'#00f'}使用颜色权重模式或两者时，用于着色标签的颜色渐变。
weightFromnull用于获取标记权重的link属性。默认值为null表示权重取自计算出的链接字体大小。
shape"sphere"目前支持的是Sphere,hcylinder 或vcylinder 三种形状显示
locknull值“x”限制云的旋转到(水平)x轴，值“y”限制旋转到(垂直)y轴。 (这些是字符串，因此需要引号)
引入 tagcanvas.min.js
Internet Explorer 9 支持画布元素,所以excanvas。js 不是必需的。Internet Explorer 9以下的浏览器版本需要引入 excanvas.js
发现实用、有趣的开源项目
HTML5
Linux运维
PHP
MySQL
CSS3
Javascript
微信开发
Web开发
TagCanvas.Start("homepage__find-wordcloud-canvas","homepage__find-wordcloud-list",{
initial:[.05,0],
shape:"sphere",
lock:"y",
textHeight:17,
radiusX:2.5,
radiusY:.6,
radiusZ:1.5,
textColour:"#489ffc",
outlineColour:"#3e97f5",
reverse:!0,
depth:.8,
centreImage:!0,
imageAlign:!0,
wheelZoom:!1,
minSpeed:.01,
maxSpeed:.05
});
效果如下：
