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. Wireshark技巧-过滤规则和显示规则【转】

    转自:https://www.cnblogs.com/icez/p/3973873.html Wireshark是一个强大的网络协议分析软件,最重要的它是免费软件. 过滤规则 只抓取符合条件的包,在W ...

  2. NandFlash和iNand【转】

    转自:https://www.cnblogs.com/PengfeiSong/p/6380447.html nand 1.nand的单元组织:block与page(大页Nand与小页Nand)(1)N ...

  3. Python在线聊天软件(Tkinter)

    1.python2.7下安装 apt-get install python-tk 主要功能是实现客户端与服务器端的双向通信,这个小东西用到的主要知识点: 1.Python Socket:2.Pytho ...

  4. NOI2019 SX 模拟赛 no.5

    Mas 的童年 题目描述:不知道传送门有没有用? 反正就是对于每个前缀序列求一个断点,使得断点左右两个区间的 分别的异或和 的和最大 分析 jzoj 原题? 但是我 TM 代码没存账号也过期了啊! 然 ...

  5. ACM Computer Factory POJ - 3436 网络流拆点+路径还原

    http://poj.org/problem?id=3436 每台电脑有$p$个组成部分,有$n$个工厂加工电脑. 每个工厂对于进入工厂的半成品的每个组成部分都有要求,由$p$个数字描述,0代表这个部 ...

  6. eclipse:显示堆内存

    如下图 :

  7. 解决 安装或卸载软件时报错Error 1001 的问题

    卸载或安装程序时出错1001:错误1001可能发生在试图更新.修复或卸载windows os中的特定程序时.此问题通常是由于程序的先前安装损坏而引起的. 错误“1001”通常会遇到,因为程序的先前安装 ...

  8. Confluence 6 配置数字格式

    在 Confluence 中使用了 2 种数字格式: 整形数字格式.例如: ############### 小数数字格式.例如:###############.########## Confluenc ...

  9. pytorch中的 requires_grad和volatile

    https://blog.csdn.net/u012436149/article/details/66971822 简单总结其用途 (1)requires_grad=Fasle时不需要更新梯度, 适用 ...

  10. linux 下安装vscode

    下载安装包 https://code.visualstudio.com/docs/?dv=linux64_deb (注意是deb包) sudo dpkg -i code_1.18.1-15108573 ...