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

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

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	最大旋转速度
minSpeed	0.0	鼠标离开画布时的最小旋转速度
decel	0.95	鼠标离开画布时的减速率
minBrightness	0.1	最远点的标签亮度（0.0-1.0）
textColour	"#ff99ff"	标记文本的颜色
textHeight	15	标记文本字体的高度（以像素为单位）
textFont	"Helvetica, Arial, sans-serif"	标签文本的字体系列
outlineColour	"#ffff99"	活动标签周围的框的颜色
outlineThickness	2	轮廓的粗细（以像素为单位）
outlineOffset	5	轮廓与文本的距离，以像素为单位
pulsateTo	1.0	"脉动轮廓不透明度(0.0 - 1.0)
pulsateTime	3	脉搏率，以每秒的秒数为单位
depth	0.5	控制透视（0.0-1.0）
initial	null	初始旋转，水平和垂直为数组，例如[0.8，-0.3。值乘以maxSpeed。
freezeActive	FALSE	设置为true以在突出显示标记时暂停移动。
frontSelect	FALSE	设置为true以防止在云后面选择标记。
txtOpt	TRUE	文本优化，将文本标签转换为图像以获得更好的性能。
txtScale	2	在txtOpt模式下转换为图像时文本的缩放系数。
reverse	FALSE	设置为true以反转相对于鼠标位置的移动方向。
hideTags	FALSE	如果TagCanvas成功启动，则设置为true以自动隐藏标记列表元素。
zoom	1	调整画布中标签云的相对大小。较大的值将放大到云，较小的值将缩小。
wheelZoom	TRUE	使用鼠标滚轮或滚动手势可以放大和缩小云。
zoomStep	0.05	每次移动鼠标滚轮时缩放变焦量。
zoomMax	3	最大缩放值。
zoomMin	0.3	最小缩放值。
shadow	"#000000"	每个标签后面阴影的颜色。
shadowBlur	0	标记阴影模糊量，以像素为单位。
shadowOffset	[0,0]	标记阴影的X和Y偏移量，以像素为单位。
weight	FALSE	设置为true以打开标签的权重。
weightMode	"size"	用于显示标记权重的方法。应该是尺寸，颜色或两者之一。
weightSize	1	用于在使用大小或两者的重量模式时调整标签大小的乘数。
weightGradient	{0:'#f00', 0.33:'#ff0', 0.66:'#0f0', 1:'#00f'}	使用颜色权重模式或两者时，用于着色标签的颜色渐变。
weightFrom	null	用于获取标记权重的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>

效果如下：

出处：小张个人博客

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

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

上一篇： vue-awesome-swiper 轮播图插件

下一篇： vue 使用 axios 访问 API

猜您喜欢