TagCanvas - HTML5 Canvas Tag Cloud
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的更多相关文章
- html5 canvas 实现简单的画图
今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...
- html5——canvas画布
一.基本介绍 1,canvas是画布,可以描画线条,图片等,现代的浏览器大部分都支持. canvas的width,height默认为300*150,要指定画布大小,不能用css样式的widh,heig ...
- html5 canvas画布上合成
source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标 ...
- html5 canvas画饼
1. [图片] lxdpie.jpg 2. [文件] lqdpie.html ~ 801B 下载(7) <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...
- HTML5 Canvas 为网页添加文字水印
<!DOCTYPE html> <html> <body> <canvas id=" style="border:1px solid #d ...
- 基于HTML5 Canvas 实现弹出框
用户鼠标移入时,有弹出框出现,这样的需求很常见.这在处理HTML元素实现时简单,但是如果是对HTML5 Canvas 构成的图形进行处理,这种方法不再适用,因为Canvas使用的是另外一套机制,无论在 ...
- 基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块
基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块 前言 最近学习了 HT for Web flow 插件,除了正常的 flow 效果,其中还有两个十分好用的两个接口 getPercen ...
- 基于 HTML5 Canvas 的机房温度云图展示
前言 在物联网的大趋势下,机房的设备信息以及一些环境信息变成了数据摆在了人们面前.在这个大数据的时代,数据的可视化不仅体现在数据值本身,更应该通过数据的变化来获取一些信息.我们今天的主题,机房温度云图 ...
- use html5 video tag with MSE for h264 live streaming
本编博客记录桌面虚拟化移动端预研. 完整demo: https://github.com/MarkRepo/wfs.js 常见的直播方案有RTMP RTSP HLS 等等, 由于这些流都需要先传输到服 ...
随机推荐
- pandas中Timestamp类用法讲解
由于网上关于Timestamp类的资料比较少,而且官网上面介绍的很模糊,本文只是对如何创建Timestamp类对象进行简要介绍,详情请读者自行查阅文档. 以下有两种方式可以创建一个Timestamp对 ...
- tomcat启动后 404 页面无法访问
如果修改端口后还不能访问,先关闭tomcat, 在bin目录下命令 ./shutdown.sh 找到80进程 netstat -an | grep 80 杀死80进程 ps -ef | grep h ...
- Java-替换字符串中的字符
package com.tj; public class MyClass implements Cloneable { public static void main(String[] args) { ...
- luogu2805 [NOI2009]植物大战僵尸
想象一下,要搞掉一个植物,必须先搞掉另一些植物--我们可以发现这是一个最大权闭合子图的问题. 最大权闭合子图的话,太空飞行计划问题是一个入门题,可以一看. 然而我们手玩一下样例就会惊恐地发现,保护关系 ...
- 大数据学习——hbase数据库
Hhbase集群搭建 一 第一步 准备:搭建hadoop集群,搭建zookeeper 二 第二步:上传安装包 解压 1 tar -zxvf hbase-1.2.1-bin.tar.gz 重命名 2 ...
- Leetcode 376.摆动序列
摆动序列 如果连续数字之间的差严格地在正数和负数之间交替,则数字序列称为摆动序列.第一个差(如果存在的话)可能是正数或负数.少于两个元素的序列也是摆动序列. 例如, [1,7,4,9,2,5] 是一个 ...
- Result实现类
package org.apache.struts2.dispatcher; import com.opensymphony.xwork2.ActionInvocation; import com.o ...
- Windows同步阿里云时间
Ctrl+R打开cmd命令框 输入:gpedit.msc 计算机配置”—“管理模版”—“系统”—“Windows 时间服务”—“时间提供程序”—“配置 Windows NTP 客户端 双击打开配置 W ...
- 九度oj 1547
题目描述: 给定一个初始为空的栈,和n个操作组成的操作序列,每个操作只可能是出栈或者入栈. 要求在操作序列的执行过程中不会出现非法的操作,即不会在空栈时执行出栈操作,同时保证当操作序列完成后,栈恰好为 ...
- CodeIgniter 防止XSS攻击
CodeIgniter 包含了跨站脚本攻击的防御机制,它可以自动地对所有POST以及COOKIE数据进行过滤,或者您也可以针对单个项目来运行它.默认情况下,它 不会 全局运行,因为这样也需要一些执行开 ...