TagCanvas是一个基于HTML5 Canvas技术开发的标签云动画。还提供一个以jQuery插件形式实现的版本。
它支持文本和图片两种格式，能够以Sphere, hcylinder 或 vcylinder三种形状显示。
TagCanvas还支持IE浏览器（利用ExplorerCanvas实现）。
实例如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>TagCanvas example</title> 5 <!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]--> 6 <script src="tagcanvas.min.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 window.onload = function() { 9 try { 10 TagCanvas.Start('myCanvas','tags',{ 11 textColour: '#ff0000', 12 outlineColour: '#ff00ff', 13 reverse: true, 14 depth: 0.8, 15 maxSpeed: 0.05 16 }); 17 } catch(e) { 18 // something went wrong, hide the canvas container 19 document.getElementById('myCanvasContainer').style.display = 'none'; 20 } 21 }; 22 </script> 23 </head> 24 <body> 25 <h1>TagCanvas example page</h1> 26 <div id="myCanvasContainer"> 27 <canvas width="300" height="300" id="myCanvas"> 28 <p>Anything in here will be replaced on browsers that support the canvas element</p> 29 </canvas> 30 </div> 31 <div id="tags"> 32 <ul> 33 <li><a href="http://www.google.com" target="_blank">Google</a></li> 34 <li><a href="/fish">Fish</a></li> 35 <li><a href="/chips">Chips</a></li> 36 <li><a href="/salt">Salt</a></li> 37 <li><a href="/vinegar">Vinegar</a></li> 38 </ul> 39 </div> 40 </body> 41 </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) |