TagCanvas - HTML5 Canvas Tag Cloud

待我称王封你为后i 2022-08-13 12:54 129阅读 0赞

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

![Center][]

**TagCanvas**是一个基于HTML5 Canvas技术开发的标签云动画。还提供一个以jQuery插件形式实现的版本。

它支持文本和图片两种格式，能够以Sphere, hcylinder 或 vcylinder三种形状显示。

TagCanvas还支持IE浏览器（利用ExplorerCanvas实现）。

### 具体参数： ###

<table> 
 <tbody> 
  <tr> 
   <th>Option</th> 
   <th>Default</th> 
   <th>Description</th> 
  </tr> 
  <tr> 
   <td>interval</td> 
   <td>20</td> 
   <td>Interval between animation frames, in milliseconds</td> 
  </tr> 
  <tr> 
   <td>maxSpeed</td> 
   <td>0.05</td> 
   <td>Maximum speed of rotation</td> 
  </tr> 
  <tr> 
   <td>minSpeed</td> 
   <td>0.0</td> 
   <td>Minimum speed of rotation when mouse leaves canvas</td> 
  </tr> 
  <tr> 
   <td>decel</td> 
   <td>0.95</td> 
   <td>Deceleration rate when mouse leaves canvas</td> 
  </tr> 
  <tr> 
   <td>minBrightness</td> 
   <td>0.1</td> 
   <td>Brightness of tags at farthest point (0.0-1.0)</td> 
  </tr> 
  <tr> 
   <td>textColour</td> 
   <td>"#ff99ff"</td> 
   <td>Colour of the tag text</td> 
  </tr> 
  <tr> 
   <td>textHeight</td> 
   <td>15</td> 
   <td>Height of the tag text font (in pixels)</td> 
  </tr> 
  <tr> 
   <td>textFont</td> 
   <td>"Helvetica, Arial,<br> sans-serif"</td> 
   <td>Font family for the tag text</td> 
  </tr> 
  <tr> 
   <td>outlineColour</td> 
   <td>"#ffff99"</td> 
   <td>Colour of the box around the active tag</td> 
  </tr> 
  <tr> 
   <td>outlineThickness</td> 
   <td>2</td> 
   <td>Thickness of outline in pixels</td> 
  </tr> 
  <tr> 
   <td>outlineOffset</td> 
   <td>5</td> 
   <td>Distance of outline from text, in pixels</td> 
  </tr> 
  <tr> 
   <td>pulsateTo</td> 
   <td>1.0</td> 
   <td>Pulsate outline to this opacity (0.0-1.0)</td> 
  </tr> 
  <tr> 
   <td>pulsateTime</td> 
   <td>3</td> 
   <td>Pulse rate, in seconds per beat</td> 
  </tr> 
  <tr> 
   <td>depth</td> 
   <td>0.5</td> 
   <td>Controls the perspective (0.0-1.0)</td> 
  </tr> 
  <tr> 
   <td>initial</td> 
   <td>null</td> 
   <td>Initial rotation, with horizontal and vertical as an array, e.g. [0.8,-0.3]. Values are multiplied by maxSpeed.</td> 
  </tr> 
  <tr> 
   <td>freezeActive</td> 
   <td>false</td> 
   <td>Set to true to pause movement when a tag is highlighted.</td> 
  </tr> 
  <tr> 
   <td>frontSelect</td> 
   <td>false</td> 
   <td>Set to true to prevent selection of tags at back of cloud.</td> 
  </tr> 
  <tr> 
   <td>txtOpt</td> 
   <td>true</td> 
   <td>Text optimisation, converts text tags to images for better performance.</td> 
  </tr> 
  <tr> 
   <td>txtScale</td> 
   <td>2</td> 
   <td>Scaling factor of text when converting to image in txtOpt mode.</td> 
  </tr> 
  <tr> 
   <td>reverse</td> 
   <td>false</td> 
   <td>Set to true to reverse direction of movement relative to mouse position.</td> 
  </tr> 
  <tr> 
   <td>hideTags</td> 
   <td>false</td> 
   <td>Set to true to automatically hide the tag list element if TagCanvas is started successfully.</td> 
  </tr> 
  <tr> 
   <td>zoom</td> 
   <td>1.0</td> 
   <td>Adjusts the relative size of the tag cloud in the canvas. Larger values will zoom into the cloud, smaller values will zoom out.</td> 
  </tr> 
  <tr> 
   <td>wheelZoom</td> 
   <td>true</td> 
   <td>Enables zooming the cloud in and out using the mouse wheel or scroll gesture.</td> 
  </tr> 
  <tr> 
   <td>zoomStep</td> 
   <td>0.05</td> 
   <td>The amount that the zoom is changed by with each movement of the mouse wheel.</td> 
  </tr> 
  <tr> 
   <td>zoomMax</td> 
   <td>3.0</td> 
   <td>Maximum zoom value.</td> 
  </tr> 
  <tr> 
   <td>zoomMin</td> 
   <td>0.3</td> 
   <td>Minimum zoom value.</td> 
  </tr> 
  <tr> 
   <td>shadow</td> 
   <td>"#000000"</td> 
   <td>Colour of the shadow behind each tag.</td> 
  </tr> 
  <tr> 
   <td>shadowBlur</td> 
   <td>0</td> 
   <td>Amount of tag shadow blurring, in pixels.</td> 
  </tr> 
  <tr> 
   <td>shadowOffset</td> 
   <td>[0,0]</td> 
   <td>X and Y offset of the tag shadow, in pixels.</td> 
  </tr> 
  <tr> 
   <td>weight</td> 
   <td>false</td> 
   <td>Set to true to turn on weighting of tags.</td> 
  </tr> 
  <tr> 
   <td>weightMode</td> 
   <td>"size"</td> 
   <td>Method to use for displaying tag weights. Should be one of size, colour or both.</td> 
  </tr> 
  <tr> 
   <td>weightSize</td> 
   <td>1.0</td> 
   <td>Multiplier for adjusting the size of tags when using a weight mode of size or both.</td> 
  </tr> 
  <tr> 
   <td>weightGradient</td> 
   <td>{0:'#f00', 0.33:'#ff0',<br> 0.66:'#0f0', 1:'#00f'}</td> 
   <td>The colour gradient used for colouring tags when using a weight mode of colour or both.</td> 
  </tr> 
  <tr> 
   <td>weightFrom</td> 
   <td>null</td> 
   <td>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.</td> 
  </tr> 
  <tr> 
   <td>shape</td> 
   <td>"sphere"</td> 
   <td>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.</td> 
  </tr> 
  <tr> 
   <td>lock</td> 
   <td>null</td> 
   <td>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)</td> 
  </tr> 
 </tbody> 
</table>

demo:

<!DOCTYPE html>
    <html>
      <head>
      	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>TagCanvas example</title>
        
        <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>

[Center]: /images/20220810/c65a1d121f0d4343bb5ecf19e92f19d9.png