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. django 常见过滤器

      一.形式:小写 {{ name | lower }} 二.过滤器是可以嵌套的,字符串经过三个过滤器,第一个过滤器转换为小写,第二个过滤器输出首字母,第三个过滤器将首字母转换成大写 标签 {{ st ...

  2. AVL树总结

    定义:一棵AVL树或者是空树,或者是具有下列性质的二叉搜索树:它的左子树和右子树都是AVL树,且左右子树的高度之差的绝对值不超过1 AVL树失衡旋转总结: 假如以T为根的子树失衡.定义平衡因子为 H( ...

  3. xfce-OpenVAS自动化安全风险评估指南

    1.  登录系统 在客户端,打开浏览器,在地址栏输入https://IP:9392/ 看到如下界面: 我们要信任此网站,点击继续浏览此网站,进入系统登录界面,如下图: 输入我提供的通用登录账号:wdl ...

  4. x86保护模式-七中断和异常

    x86保护模式-七中断和异常 386相比较之前的cpu   增强了中断处理能力   并且引入了 异常概念 一 80386的中断和异常 为了支持多任务和虚拟存储器等功能,386把外部中断称为中断     ...

  5. hdu 4764 巴什博弈

    Stone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  6. 多重部分和 poj1742

    Description People in Silverland use coins.They have coins of value A1,A2,A3...An Silverland dollar. ...

  7. 07-复习数组和简单api

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. Spoj-DRUIDEOI Fata7y Ya Warda!

    Fata7y Ya Warda! Druid (AKA Amr Alaa El-Deen) and little EOIers have finished their training and the ...

  9. iOS7 毛玻璃效果

    转自:http://prolove10.blog.163.com/blog/static/138411843201391401054305/ 原图:  效果图:  实现:首先需要导入Accelerat ...

  10. Eclipse 语言文件下载地址

    http://www.eclipse.org/babel/downloads.php 更改配色: 安装新软件: http://eclipse-color-theme.github.com/update