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. ajax dataType

    dataType 类型:String 预期服务器返回的数据类型.如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML.在 1.4 ...

  2. html,css样式错误总结

    a元素不能嵌套a元素 a元素嵌套a元素会使a元素闭合出现混乱,导致浏览器识别出多个a元素.

  3. VIJOS 1889 天真的因数分解 ——莫比乌斯函数

    同理BZOJ2440 二分答案,不过这次变成了统计含有平方因子的个数 #include <cmath> #include <cstdio> #include <cstri ...

  4. [HNOI2002]彩票 (搜索+剪枝)

    题目描述 某地发行一套彩票.彩票上写有1到M这M个自然数.彩民可以在这M个数中任意选取N个不同的数打圈.每个彩民只能买一张彩票,不同的彩民的彩票上的选择不同. 每次抽奖将抽出两个自然数X和Y.如果某人 ...

  5. spring aop在mvc的controller中加入切面无效

    spring aop在mvc的controller中加入切面无效 因为MVC的controller,aop默认使用jdk代理.要使用cglib代理. 在spring-mybatis.xml配置文件中加 ...

  6. __new__ 与 __init__的区别

    原文地址:http://www.cnblogs.com/ifantastic/p/3175735.html 单例模式 class Singleton(object): def __new__(cls, ...

  7. Oracle命令行创建数据库

    创建数据库文件 CREATE TABLESPACE MyDataBase LOGGING DATAFILE 'D:\Oracle\database\MyDataBase.dbf' SIZE 100M ...

  8. Mac 10.9 安装及使用 phoneGap

    公司网速是个坑啊 绝对掉进去就起不来的那种..... 按官网的说法: 1. 下载并安装Node.js 2. sudo npm install -g phonegap  官网的安装步骤到此为止....坑 ...

  9. 第一行代码 Android 思维导图

    第一行代码 Android  思维导图

  10. python--错误了就需要调试（异常处理）

    python提供了两个非常重要的功能来处理python程序在运行中出现的异常和错误.你可以使用该功能来调试python程序. 我们可打开idle-->F1进行查看文档,里面很多异常类型,如图: ...