TagCanvas - HTML5 Canvas Tag Cloud

最新推荐文章于 2024-07-31 15:53:51 发布

云飞扬扬

最新推荐文章于 2024-07-31 15:53:51 发布

阅读量7.7k

点赞数

本文链接：https://blog.csdn.net/nickroprak/article/details/40506325

版权

前端专栏收录该内容

117 篇文章 3 订阅

订阅专栏

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>