tagcanvas标签云文字与图片示例代码-html代码-BFW代码库

代码语言：html

代码描述：tagcanvas标签云文字与图片示例代码，包含多种形状，支持图片与文字标签云，支持多个标签云联动

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>TagCanvas - an HTML5 Canvas Tag Cloud</title>
 


    <style type="text/css">
        body{
              background: white;
          }
            #cparent {
             position: relative;
             width: 0;
             height: 0;
            }
            #cmsg {
             position: absolute;
             top: 20px;
             left: 10px;
             width: 160px;
             padding: 6px;
             border: 4px solid #aaa;
             background-color: #eee;
             text-align: center
            }
            #cmsg:hover { opacity: 0.5 }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tagcanvas.2.9.js"></script>
    <script type="text/javascript">
        //<![CDATA[
        var oopts = {
         textFont: 'Impact,Arial Black,sans-serif',
         textHeight: 20,
         maxSpeed: 0.1,
         decel: 0.9,
         depth: 0.99,
         outlineColour: '#f6f',
         outlineThickness: 3,
         pulsateTo: 0.2,
         pulsateTime: 0.5,
         wheelZoom: false
        }, ttags = 'taglist', lock, shape = 'sphere';
        window.onload = function() {
         TagCanvas.textFont = 'Trebuchet MS, Helvetica, sans-serif';
         TagCanvas.textColour = '#00f';
         TagCanvas.textHeight = 25;
         TagCanvas.outlineMethod = 'block';
         TagCanvas.outlineColour = '#acf';
         TagCanvas.maxSpeed = 0.03;
         TagCanvas.minBrightness = 0.2;
         TagCanvas.depth = 0.92;
         TagCanvas.pulsateTo = 0.6;
         TagCanvas.initial = [0.1,-0.1];
         TagCanvas.decel = 0.98;
         TagCanvas.reverse = true;
         TagCanvas.hideTags = false;
         TagCanvas.shadow = '#ccf';
         TagCanvas.shadowBlur = 3;
         TagCanvas.weight = false;
         TagCanvas.imageScale = null;
         TagCanvas.fadeIn = 1000;
         TagCanvas.clickToFront = 600;
         try {
          TagCanvas.Start('tagcanvas','taglist');
          TagCanvas.Start('smallCanvas','moreTags', oopts);
          f('options');
         } catch(e) {
          document.getElementById('cmsg').style.display='none';
          document.getElementsByTagName('canvas')[0].style.border='0';
         }
        };
        function BGImage(e) {
         document.getElementById('tagcanvas').style.backgroundImage = (e.checked ? 'url(//repo.bfw.wiki/bfwrepo/image/60ca9014f070d.png)' : 'none');
        }
        function f(a) {
         TagCanvas.Start('otherCanvas',a,oopts);
         return false;
        }
        function restart() {
         TagCanvas.shape = shape;
         TagCanvas.lock = lock;
         TagCanvas.Start('tagcanvas',ttags);
        }
        function changetags(t) {
         ttags = t;
         restart();
        }
        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();
        }
        function tpu(s) {
         document.getElementById('sout').innerHTML = s.innerHTML;
         return false;
        }
        //]]>
    </script>
</head>

<body>


    <div id="content">


        <div class="centred" style="width: 100%; max-width: 602px">


            <canvas id="tagcanvas" width="560" height="400" style="max-width: 560px; width: 100%">

<p>对不起，您的浏览器不支持</p>
</canvas>

            <div style="text-align: center">
                <button onclick="changetags('taglist')">文字链接</button>
                <button onclick="changetags('iconTags')">图片链接</button>
                <label><input type="checkbox" onclick="BGImage(this)" />设置背景图片
            <div style="text-align: center">
                <span>云形状:</span>
                <button onclick="changeshape('hcylinder')">hcylinder</button>
                <button onclick="changeshape('vcylinder')">vcylinder</button>
                <button onclick="changeshape('hring')">hring</button>
                <button onclick="changeshape('vring')">vring</button>
                <button onclick="changeshape('sphere')">sphere</button>
            </div>
            <p>你点击了: <em id=sout style=color:#900>&hellip;还没点呢!</em></p>
        </div>



        <h2>标签云联动</h2>
        <div style="overflow: auto">
            <canvas id="smallCanvas" width="345" height="200" style="width:100%;max-width:45%;float:left"><p>This is another canvas</p></canvas>
            <canvas id="otherCanvas" width="345" height="200" style="width:100%;max-width:45%;float:right"><p>And another canvas</p></canvas>
        </div>
        <p>两个标签云联动效果，点击左边的便签云，右边会变化</p>

        <div style="display: none">
            <div id="taglist">
                <ul>
                    <li><a href="#fake1" onclick="return tpu(this)">Fake link 1</a></li>
                    <li><a href="#fake2" onclick="return tpu(this)">Fake link 2</a></li>
                    <li><a href="#fake3" onclick="return tpu(this)">Fake link 3</a></li>
                    <li><a href="#fake4" onclick="return tpu(this)">Fake link 4</a></li>
                    <li><a href="#fake5" onclick="return tpu(this)">Fake link 5</a></li>
                    <li><a href="#fake6" onclick="return tpu(this)">Fake link 6</a></li>
                </ul>
.........完整代码请登录后点击上方下载按钮下载查看