TagCanvas - HTML5 Canvas Tag Cloud
http://www.goat1000.com/tagcanvas.php
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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。