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. Developing

    To work with the Android code, you will need to use both Git and Repo. In most situations, you can u ...

  2. 笛卡尔&小雷：科学发展有规律，研究科学有方法

    一直在总结自己的学习和研究方法,最近在读吴军写的<文明之光> ,感觉这篇介绍笛卡尔的内容非常有价值,特此整理.最近开始在密谋自己的理论体系,低调实施中...  笛卡尔按照感知的方式,把人的 ...

  3. C#自定义Excel操作类

    C#自定义Excel操作类,可以用于将DataTable导出到Excel文件,从Excel文件读取数据. using System; using System.IO; using System.Dat ...

  4. 九度oj 题目1112：拦截导弹

    题目描述: 某国为了防御敌国的导弹袭击,开发出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕捉到敌国的导 ...

  5. Git 常用命令整理（持续更新）

    #配置 git config --global user.name "Your Name" git config --global user.email "email@e ...

  6. 【Luogu】P2759奇怪的函数（二分）

    题目链接 看了题解之后突然发现这题简直是水题.然而不看题解就想不出来.为什么呢? len(x)=log10(x)+1 于是二分寻找x. #include<iostream> #includ ...

  7. poj1930 数论

    Dead Fraction Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 1258   Accepted: 379 Desc ...

  8. Redis集群模式配置

    redis集群部署安装: https://blog.csdn.net/huwh_/article/details/79242625 https://www.cnblogs.com/mafly/p/re ...

  9. Chrome 浏览器安装Vue插件方法 (十分详细)

    博主最近在研究Vue,无奈新手想安装Chrome的Vue插件,整理下安装流程: 1.首先去github下载vue.zip文件插件(还有npm安装方法这里就不介绍了自行百度)下载地址:https://g ...

  10. yum gd linux

    32位操作系统安装命令:[root@localhost ~]# yum install php-gd*64位操作系统安装命令:[root@localhost ~]# yum install php-g ...