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. Hibernate 框架理解

    Hibernate框架简化了java应用程序与数据库交互的开发.Hibernate是一个开源,轻量级的ORM(对象关系映射)工具. ORM工具简化浏览数据的创建,数据处理和数据访问.它是将对象映射到数 ...

  2. python中获取python版本号的方法【转】

    原文 python3 #!/usr/bin/python # 第1种方法 import platform print(platform.python_version()) >>> i ...

  3. 一款基于jQuery的QQ表情插件

    我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您 ...

  4. hlgoj 1766 Cubing

    模拟.下图是我做的小模型. #include <iostream> #include <stdio.h> #include <queue> #include < ...

  5. XML文件中<return_code><![CDATA[SUCCESS]]></return_code>中CDATA的用法

    转义字符不合法的XML字符必须被替换为相应的实体. 如果在XML文档中使用类似"<" 的字符, 那么解析器将会出现错误,因为解析器会认为这是一个新元素的开始.所以不应该象下面 ...

  6. BZOJ 3907: 网格【组合数学】

    Description 某城市的街道呈网格状,左下角坐标为A(0, 0),右上角坐标为B(n, m),其中n >= m.现在从A(0, 0)点出发,只能沿着街道向正右方或者正上方行走,且不能经过 ...

  7. 算法复习——cdq分治

    题目: Description 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),又三个整数表示.现要对每朵花评级,一朵花的级别是它拥有的美丽能超过的花的数量.定义一朵花A比另一朵花B要 ...

  8. R语言入门视频笔记--5--自定义函数

    自定义函数 你可以输出一段代码,创建一个你自己定义的函数 蛋是如果你两个自定义函数的名字重复的话,后面的会把前面的替换掉 举个栗子: hanshu1 <- function(x)  sqrt(v ...

  9. android获取手机号

    private String getPhoneNum(){ //与手机建立连接 TelephonyManager tm = (TelephonyManager)getSystemService(Con ...

  10. Android UI设计--半透明效果对话框及activity(可做遮罩层)

    下面是style的一些属性及其解释 <style name="dialog_translucent" parent="@android:style/Theme.Di ...