TagCanvas 插件
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 插件的更多相关文章
- 前端开发需要了解的JS插件
excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...
- TagCanvas - HTML5 Canvas Tag Cloud
http://www.goat1000.com/tagcanvas.php watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmlja3JvcHJhaw==/ ...
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告
最近在做基于jenkins ant junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- solr服务中集成IKAnalyzer中文分词器、集成dataimportHandler插件
昨天已经在Tomcat容器中成功的部署了solr全文检索引擎系统的服务:今天来分享一下solr服务在海量数据的网站中是如何实现数据的检索. 在solr服务中集成IKAnalyzer中文分词器的步骤: ...
- 使用Visual Studio SDK制作GLSL词法着色插件
使用Visual Studio SDK制作GLSL词法着色插件 我们在Visual Studio上开发OpenGL ES项目时,避免不了写Shader.这时在vs里直接编辑shader就会显得很方便. ...
- 工欲善其事，必先利其器 之 VS2013全攻略(安装，技巧，快捷键，插件）！
如有需要WPF工具的朋友可以移步 工欲善其事,必先利其器 之 WPF篇: 随着开发轨迹来看高效WPF开发的工具和技巧 之前一篇<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATI ...
- Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件
Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...
随机推荐
- 使用new data计算时间以及格式转换
1.时间计算,往后加30(默认一个月的时间),sxTime表示的是在当前时间往后加几天的之后一个月 function maxDate1(){ var nowDate = new Date(); max ...
- new-delete-malloc-free关系总结
new-delete-malloc-free关系总结 写在前面的话 这个系列的笔记总结是根据网上的两篇基础拓展而来的 C++经典面试题(最全,面中率最高) C++面试集锦( 面试被问到的问题 ) 面试 ...
- less/sass 基础base文件
less less-base.less文件展示: //清除标签默认样式; .label(){ ;;;_background-image:url(n1othing.txt)} ;;; font-size ...
- python学习第1天
01 cpu 内存 硬盘 操作系统 CPU:中央处理器,相当于人大脑. 飞机 内存:临时存储数据. 8g,16g, 高铁 1,成本高. 2,断电即消失. 硬盘:长期存储大量的数据. 1T 512G等等 ...
- Django 笔记（四）模板标签 ~ 自定义过滤器
模板标签: 标签在渲染的过程中提供任意的逻辑 语法: 由{% ... %} 和 {% end... %} 常用标签: with:类似取别名 模版继承: Django模版引擎中最强大也是最复杂的部分就是 ...
- scrapy-redis(调度器Scheduler源码分析)
settings里面的配置:'''当下面配置了这个(scrapy-redis)时候,下面的调度器已经配置在scrapy-redis里面了'''##########连接配置######## REDIS_ ...
- Codeforces 1097G Vladislav and a Great Legend [树形DP，斯特林数]
洛谷 Codeforces 这题真是妙的很. 通过看题解,终于知道了\(\sum_n f(n)^k\)这种东西怎么算. update:经过思考,我对这题有了更深的理解,现将更新内容放在原题解下方. ...
- 8大排序之Python实现 冒泡排序优化
1.冒泡排序(从大到小):交换发生在内部循环 稳定的排序 冒泡排序的平均时间复杂度是O(n2),最好的时间复杂度是O(n),最坏的时间复杂度是O(n2),空间复杂度为O(1) 冒泡排序的优化在于did ...
- 8 张图帮你一步步看清 async/await 和 promise 的执行顺序（转）
https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651555491&idx=1&sn=73779f84c289d9 ...
- 锤子科技"临死前"被"接盘" ，内部人士爆料已改签今日头条母公司
就在昨天,据据锤子科技内部人士透露,部分锤子科技员工在昨天已经接到了相关的临时通知,要求改签劳动合同至今日头条的母公司——字节跳动.至于这是锤子科技真正再度复活还是借尸还魂都不重要,重要的是,作为忠实 ...