码迷,mamicode.com
首页 > Web开发 > 详细

TagCanvas - HTML5 Canvas Tag Cloud

时间:2014-10-27 14:26:01      阅读:389      评论:0      收藏:0      [点我收藏+]

标签:tag   canvas   html5   标签   

http://www.goat1000.com/tagcanvas.php

bubuko.com,布布扣

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

标签:tag   canvas   html5   标签   

原文地址:http://blog.csdn.net/nickroprak/article/details/40506325

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!