TagCanvas - HTML5 Canvas技术开发的标签云动画

发布时间:2018-12-21 编辑:小张个人博客 查看次数:4244


TagCanvas - HTML5 Canvas Tag Cloud.png

TagCanvas 是一个基于HTML5Canvas技术开发的标签云动画。还提供一个以jQuery插件形式实现的版本。它支持文本和图片两种格式,能够以 Sphere, hcylinder  或 vcylinder 三种形状显示。TagCanvas 还支持IE浏览器(利用 ExplorerCanvas 实现)。

TagCanvas是一个 Javascript 类绘制和动画 HTML5 Canvas 技术开发的标签云动画,还提供一个以jQuery 插件形式实现的版本。

获取地址:http://www.goat1000.com/tagcanvas.php

参数说明:


选项                    默认说明
interval 20动画帧之间的间隔,以毫秒为单位
maxSpeed 0.05最大旋转速度
minSpeed0.0鼠标离开画布时的最小旋转速度
decel 0.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。
freezeActive  FALSE设置为true以在突出显示标记时暂停移动。
frontSelectFALSE设置为true以防止在云后面选择标记。
txtOptTRUE文本优化,将文本标签转换为图像以获得更好的性能。
txtScale2在txtOpt模式下转换为图像时文本的缩放系数。
reverseFALSE设置为true以反转相对于鼠标位置的移动方向。
hideTags FALSE如果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 三种形状显示
lock  null值“x”限制云的旋转到(水平)x轴,值“y”限制旋转到(垂直)y轴。 (这些是字符串,因此需要引号)

引入 tagcanvas.min.js

Internet Explorer 9 支持画布元素,所以excanvas。js 不是必需的。Internet Explorer 9 以下的浏览器版本需要引入 excanvas.js 

<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="tagcanvas.min.js" type="text/javascript"></script>
<div >
<h1 style="margin-left:175px;">发现实用、有趣的开源项目</h1>
<div>
<div class='homepage__find-wordcloud-canvas-container'>
     <canvas height='250' id='homepage__find-wordcloud-canvas' width='800'></canvas>
</div>
<div class='homepage__find-wordcloud-list' id='homepage__find-wordcloud-list'>
	<ul>
		<li>
			<a href="http://www.023xs.cn/Category/3" target="_blank">HTML5</a>
		</li>
		<li>
			<a href="http://blog.023xs.cn/Category/6" target="_blank">Linux 运维</a>
		</li>
		<li>
			<a href="http://blog.023xs.cn/Category/5" target="_blank">PHP</a>
		</li>
		<li>
			<a href="http://www.023xs.cn/Category/5" target="_blank">MySQL</a>
		</li>
		<li>
			<a href="http://blog.023xs.cn/Category/3" target="_blank">CSS3</a>
		</li>
		<li>
			<a href="http://blog.023xs.cn/Category/3" target="_blank">Javascript</a>
		</li>
		<li>
			<a href="http://blog.023xs.cn/Category/3" target="_blank">微信开发</a>
		</li>
		<li>
			<a href="http://blog.023xs.cn" target="_blank">Web 开发</a>
		</li>
	</ul>
</div>
</div>
<script>
    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
    });
</script>

效果如下:

TagCanvas.png



出处:小张个人博客

网址:http://blog.023xs.cn/

您的支持是对博主最大的鼓励,感谢您的认真阅读。欢迎转载,但请保留该声明。

顶部

Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1

联系方式:[email protected] | 本站文章仅供学习和参考

渝公网安备 50024102500267号