TagCanvas是一个基于HTML5 Canvas技术开发的标签云动画。还提供一个以jQuery插件形式实现的版本。

它支持文本和图片两种格式，能够以Sphere, hcylinder 或 vcylinder三种形状显示。

TagCanvas还支持IE浏览器（利用ExplorerCanvas实现）。

实例如下：

 <!DOCTYPE html>

 <html>

   <head>

     <title>TagCanvas example</title>

     <!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

     <script src="tagcanvas.min.js" type="text/javascript"></script>

     <script type="text/javascript">

       window.onload = function() {

         try {

           TagCanvas.Start('myCanvas','tags',{

             textColour: '#ff0000',

             outlineColour: '#ff00ff',

             reverse: true,

             depth: 0.8,

             maxSpeed: 0.05

           });

         } catch(e) {

           // something went wrong, hide the canvas container

           document.getElementById('myCanvasContainer').style.display = 'none';

         }

       };

     </script>

   </head>

   <body>

     <h1>TagCanvas example page</h1>

     <div id="myCanvasContainer">

       <canvas width="300" height="300" id="myCanvas">

         <p>Anything in here will be replaced on browsers that support the canvas element</p>

       </canvas>

     </div>

     <div id="tags">

       <ul>

         <li><a href="http://www.google.com" target="_blank">Google</a></li>

         <li><a href="/fish">Fish</a></li>

         <li><a href="/chips">Chips</a></li>

         <li><a href="/salt">Salt</a></li>

         <li><a href="/vinegar">Vinegar</a></li>

       </ul>

     </div>

   </body>

 </html>

具体参数：

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)

TagCanvas 插件的更多相关文章

  1. 前端开发需要了解的JS插件

    excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...

  2. TagCanvas - HTML5 Canvas Tag Cloud

    http://www.goat1000.com/tagcanvas.php watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmlja3JvcHJhaw==/ ...

  3. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  4. Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告

    最近在做基于jenkins ant  junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...

  5. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  6. solr服务中集成IKAnalyzer中文分词器、集成dataimportHandler插件

    昨天已经在Tomcat容器中成功的部署了solr全文检索引擎系统的服务:今天来分享一下solr服务在海量数据的网站中是如何实现数据的检索. 在solr服务中集成IKAnalyzer中文分词器的步骤: ...

  7. 使用Visual Studio SDK制作GLSL词法着色插件

    使用Visual Studio SDK制作GLSL词法着色插件 我们在Visual Studio上开发OpenGL ES项目时,避免不了写Shader.这时在vs里直接编辑shader就会显得很方便. ...

  8. 工欲善其事，必先利其器 之 VS2013全攻略(安装，技巧，快捷键，插件）！

    如有需要WPF工具的朋友可以移步 工欲善其事,必先利其器 之 WPF篇: 随着开发轨迹来看高效WPF开发的工具和技巧 之前一篇<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATI ...

  9. Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

    Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...

随机推荐

  1. Nest + typeorm

    1\     Nest (https://nestjs.com/)  is a framework for building efficient, scalable Node.js web appli ...

  2. python去除字符串里的非数字

    filter(lambda ch: ch in ‘0123456789.’, crazystring)

  3. 题解-BOI 2004 Sequence

    Problem bzoj & Luogu 题目大意: 给定序列\(\{a_i\}\),求一个严格递增序列\(\{b_i\}\),使得\(\sum \bigl |a_i-b_i\bigr|\)最 ...

  4. 使用sudo而无需输入密码的设置

    在linux上,root用户是老大,什么事都能做.但是,很多时候由于安全等各种原因,我们不希望把root用户开放给大家,但是又希望其他的用户可以有root的权限,所以就有了sudo用户.而执行sudo ...

  5. SharePoint 2010 安装错误：请重新启动计算机，然后运行安装程序以继续

    一．环境:Windows Server 2008 R2 with sp1,SharePoint 2010 二．问题描述: 正常的安装SharePoint 2010 ,安装完必备组件,并提示所有必备组件 ...

  6. django的内置信号

    Model singnalspre_init 在model执行构造方法之前自动触发post_init django的model在执行构造方法之后,自动触发pre_save django的对象保存之前, ...

  7. JS 操作数组对象

    我们在操作数组时,加入数组中是以对象的形式存在,例如: 那么我们会涉及到去重复,去掉为0的数组中的对象,js代码如下: function getItemList(gid, totalMoney, ad ...

  8. idea Unable to open debugger port (127.0.0.1:58006) Address already in use: JVM_Bind 的解决办法

    报错说端口58006 被占用了,于是去修改端口 重新dubug 发现换个端口号还是不行,同样的错误.有时候你把idea关闭重新打开依旧不起作用.最暴力的办法就是重启电脑... 问题解决: 查看使用中的 ...

  9. PID控制器开发笔记之四：梯形积分PID控制器的实现

    从微积分的基本原理看,积分的实现是在无限细分的情况下进行的矩形加和计算.但是在离散状态下,时间间隔已经足够大,矩形积分在某些时候显得精度要低了一些,于是梯形积分被提出来以提升积分精度. 1.梯形积分基 ...

  10. Confluence 6 升级自定义的站点和空间仔细测试你的修改

    修改可能对 Confluence 的后续版本不兼容,当你对 Confluence 进行升级的时候,你应该总是对你自定义修改的模板文件进行仔细的测试来确定所有的修改对新版本的 Confluence 兼容 ...