http://www.goat1000.com/tagcanvas.php

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmlja3JvcHJhaw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

TagCanvas是一个基于HTML5 Canvas技术开发的标签云动画。

还提供一个以jQuery插件形式实现的版本号。

它支持文本和图片两种格式，可以以Sphere, hcylinder 或 vcylinder三种形状显示。

TagCanvas还支持IE浏览器（利用ExplorerCanvas实现）。

详细參数：

Option Default Description
interval 20 Interval between animation frames, in milliseconds
maxSpeed 0.05 Maximum speed of rotation
minSpeed 0.0 Minimum speed of rotation when mouse leaves canvas
decel 0.95 Deceleration rate when mouse leaves canvas
minBrightness 0.1 Brightness of tags at farthest point (0.0-1.0)
textColour "#ff99ff" Colour of the tag text
textHeight 15 Height of the tag text font (in pixels)
textFont "Helvetica, Arial,

sans-serif"		 Font family for the tag text
outlineColour "#ffff99" Colour of the box around the active tag
outlineThickness 2 Thickness of outline in pixels
outlineOffset 5 Distance of outline from text, in pixels
pulsateTo 1.0 Pulsate outline to this opacity (0.0-1.0)
pulsateTime 3 Pulse rate, in seconds per beat
depth 0.5 Controls the perspective (0.0-1.0)
initial null Initial rotation, with horizontal and vertical as an array, e.g. [0.8,-0.3]. Values are multiplied by maxSpeed.
freezeActive false Set to true to pause movement when a tag is highlighted.
frontSelect false Set to true to prevent selection of tags at back of cloud.
txtOpt true Text optimisation, converts text tags to images for better performance.
txtScale 2 Scaling factor of text when converting to image in txtOpt mode.
reverse false Set to true to reverse direction of movement relative to mouse position.
hideTags false Set to true to automatically hide the tag list element if TagCanvas is started successfully.
zoom 1.0 Adjusts the relative size of the tag cloud in the canvas. Larger values will zoom into the cloud, smaller values will zoom out.
wheelZoom true Enables zooming the cloud in and out using the mouse wheel or scroll gesture.
zoomStep 0.05 The amount that the zoom is changed by with each movement of the mouse wheel.
zoomMax 3.0 Maximum zoom value.
zoomMin 0.3 Minimum zoom value.
shadow "#000000" Colour of the shadow behind each tag.
shadowBlur 0 Amount of tag shadow blurring, in pixels.
shadowOffset [0,0] X and Y offset of the tag shadow, in pixels.
weight false Set to true to turn on weighting of tags.
weightMode "size" Method to use for displaying tag weights. Should be one of size, colour or both.
weightSize 1.0 Multiplier for adjusting the size of tags when using a weight mode of size or both.
weightGradient {0:'#f00', 0.33:'#ff0',

0.66:'#0f0', 1:'#00f'}		 The colour gradient used for colouring tags when using a weight mode of colour or both.
weightFrom null The link attribute to take the tag weight from. The default of null means that the weight is taken from the calculated link font size.
shape "sphere" The shape of the cloud. Currently supported are sphere, hcylinder for a cylinder that starts off horizontal and vcylinder for a cylinder that starts off vertical.
lock null A value of "x" limits rotation of the cloud to the (horizontal) x-axis, and a value of "y" limits rotation to the (vertical) y-axis. (These are strings, so the quotes are required)

demo:

<!DOCTYPE html>

<html>

  <head>

  	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>TagCanvas example</title>

    <!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

    <script src="js/tagcanvas.min.js" type="text/javascript"></script>

    <script type="text/javascript">

		window.onload = function() {

			try {

				TagCanvas.Start('myTag','tags',{

				textColour: '#63cdff',

				outlineColour: '#63cdff',

				reverse: true,

				depth: 0.8,

				maxSpeed: 0.05

				});

			} catch(e) {

				document.getElementById('myCloudTag').style.display = 'none';

			}

		};

		function changeshape(s) {

			var locks = { hcylinder: 'x', vcylinder: 'y', hring: 'x', vring: 'y', sphere: '' };

			lock = locks[s] || '';

			shape = s;

			TagCanvas.initial = (lock == 'x' && [0,0.2]) || (lock == 'y' && [0.2,0]) || [0.2,0.2];

			restart();

		}

		changeshape('vcylinder')

    </script>

  </head>

  <body style="background:#000">

    <div id="myCloudTag">

      <canvas width="600" height="350" id="myTag">

        <p>Anything in here will be replaced on browsers that support the canvas element</p>

      </canvas>

    </div>

    <div id="tags">

      <ul>

        <li><a href="#" style="font-size:30px;">认证考试</a></li>

        <li><a href="#">UMTS OMSTAR </a></li>

        <li><a href="#">客户经理角色认知</a></li>

        <li><a href="#">PM角色</a></li>

        <li><a href="#">维修</a></li>

        <li><a href="#">信息安全</a></li>

        <li><a href="#">UMTS OMSTAR </a></li>

        <li><a href="#">客户经理角色认知</a></li>

        <li><a href="#">PM角色</a></li>

        <li><a href="#">维修</a></li>

      </ul>

    </div>

  </body>

</html>

TagCanvas - HTML5 Canvas Tag Cloud的更多相关文章

  1. html5 canvas 实现简单的画图

    今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js  , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...

  2. html5——canvas画布

    一.基本介绍 1,canvas是画布,可以描画线条,图片等,现代的浏览器大部分都支持. canvas的width,height默认为300*150,要指定画布大小,不能用css样式的widh,heig ...

  3. html5 canvas画布上合成

    source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标 ...

  4. html5 canvas画饼

    1. [图片] lxdpie.jpg ​2. [文件] lqdpie.html ~ 801B     下载(7) <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...

  5. HTML5 Canvas 为网页添加文字水印

    <!DOCTYPE html> <html> <body> <canvas id=" style="border:1px solid #d ...

  6. 基于HTML5 Canvas 实现弹出框

    用户鼠标移入时,有弹出框出现,这样的需求很常见.这在处理HTML元素实现时简单,但是如果是对HTML5 Canvas 构成的图形进行处理,这种方法不再适用,因为Canvas使用的是另外一套机制,无论在 ...

  7. 基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块

    基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块 前言 最近学习了 HT for Web flow 插件,除了正常的 flow 效果,其中还有两个十分好用的两个接口 getPercen ...

  8. 基于 HTML5 Canvas 的机房温度云图展示

    前言 在物联网的大趋势下,机房的设备信息以及一些环境信息变成了数据摆在了人们面前.在这个大数据的时代,数据的可视化不仅体现在数据值本身,更应该通过数据的变化来获取一些信息.我们今天的主题,机房温度云图 ...

  9. use html5 video tag with MSE for h264 live streaming

    本编博客记录桌面虚拟化移动端预研. 完整demo: https://github.com/MarkRepo/wfs.js 常见的直播方案有RTMP RTSP HLS 等等, 由于这些流都需要先传输到服 ...

随机推荐

  1. 00048_this关键字

    1.this调用构造方法 (1)构造方法之间的调用,可以通过this关键字来完成: (2)构造方法调用格式 this(参数列表); (3)小案例 class Person { // Person的成员 ...

  2. luogu2569 [SCOI2010]股票交易

    题解看这里 #include <iostream> #include <cstring> #include <cstdio> using namespace std ...

  3. Configure Red Hat Enterprise Linux shared disk cluster for SQL Server

    下面一步一步介绍一下如何在Red Hat Enterprise Linux系统上为SQL Server配置共享磁盘集群(Shared Disk Cluster)及其相关使用(仅供测试学习之用,基础篇) ...

  4. NYOJ 118 修路方案

    修路方案 时间限制:3000 ms  |  内存限制:65535 KB 难度:5   描述 南将军率领着许多部队,它们分别驻扎在N个不同的城市里,这些城市分别编号1~N,由于交通不太便利,南将军准备修 ...

  5. [BZOJ4989] [Usaco2017 Feb]Why Did the Cow Cross the Road（树状数组）

    传送门 发现就是逆序对 可以树状数组求出 对于旋转操作,把一个序列最后面一个数移到开头,假设另一个序列的这个数在位置x,那么对答案的贡献 - (n - x) + (x - 1) #include &l ...

  6. 解决 sqlalchemy 报错：（1193, "Unknown system variable 'tx_isolation'"）

    1出现此报错的原因是使用的mysql8.0 以前用的是:tx_isolation 现在用是: transaction_isolation a.通过升级 sqlalchemy 的方法可以解决此问题, p ...

  7. chromedriver错误信息提示

    The open chrome driver window displays: Starting ChromeDriver (v2.8.241075) on port 10820 [8804:7492 ...

  8. MySQL中blob 与 text

    BLOB是一个二进制大对象,可以容纳可变数量的数据.有4种BLOB类型:TINYBLOB.BLOB.MEDIUMBLOB和LONGBLOB.它们只是可容纳值的最大长度不同. 有4种TEXT类型:TIN ...

  9. 狗书（flask基础）

    为什么选择使用flask? 和其他框架相比, Flask 之所以能脱颖而出,原因在于它让开发者做主,使其能对程序具有全面的创意控制. 在 Flask 中,你可以自主选择程序的组件,如果找不到合适的,还 ...

  10. 高性能mysql之schema与数据类型优化

    1.数据类型 http://www.cnblogs.com/YDDMAX/p/4937770.html