字符云3d

最新推荐文章于 2023-07-13 17:31:24 发布

dongsdh

最新推荐文章于 2023-07-13 17:31:24 发布

阅读量154

点赞数

分类专栏：第三方-echarts 文章标签：前端 javascript servlet

本文链接：https://blog.csdn.net/dongsdh/article/details/127117927

版权

第三方-echarts 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

参考

tag-canvas - npm

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>TagCanvas example page</h1>
  <div id="myCanvasContainer">
    <canvas width="300" height="300" id="exampleCanvas">
      <p>Anything in here will be replaced on browsers that support the canvas element</p>
    </canvas>
  </div>
  <div id="extags">
    <ul>
      <li><a href="/fish">文字1</a></li>
      <li><a href="/chips">文字2</a></li>
      <li><a href="/salt">文字3</a></li>
      <li><a href="/vinegar">文字4</a></li>
      <li><a href="/vinegar">文字5</a></li>
    </ul>
  </div>
  <button onclick="tcStart()">开始</button>
  <button onclick="tcPause()">暂停</button>
  <button onclick="tcResume()">继续</button>
  <button onclick="tcReload()">重新加载</button>
  <!-- <button onclick="tcUpdate()">Update</button> -->
  <!-- <button onclick="tcFront()">TagToFront</button> -->
  <button onclick="tcRotate()">随机转动角度后停止</button>
  <button onclick="tcSpeed()">跳转转动角度后不会停止</button>
  <br>
  <button onclick="changeColor()">文字颜色</button>
  <button onclick="changeBorderW()">边框宽度</button>
  <button onclick="changePadding()">边框内边距</button>
  <button onclick="changeRadius()">边框圆角</button>
  <button onclick="outline()">取消样式</button>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://www.goat1000.com/tagcanvas.min.js"></script>
  <script type="text/javascript">

    var o = {
      textFont: 'Arial, Helvetica, sans-serif',
      maxSpeed: 0.05,
      minSpeed: 0.01,
      textColour: '#900',
      textHeight: 25,
      outlineMethod: 'colour',
      fadeIn: 800,
      outlineColour: '#039',
      outlineOffset: 0,
      depth: 0.97,
      minBrightness: 0.2,
      wheelZoom: false,
      reverse: true,
      shadowBlur: 2,
      shuffleTags: true,
      shadowOffset: [1, 1],
      stretchX: 1.7,
      initial: [0, 0.1],
      clickToFront: 600,
      // weightMode: 'bgoutline',
      // bgOutlineThickness: 3,
      // padding: 2, 
      // bgRadius: 5
    };
    function tcStart() {
      var s = (new Date).getTime() / 360;
      o.initial[0] = 0.2 * Math.cos(s);
      o.initial[1] = 0.2 * Math.sin(s);
      TagCanvas.Start('exampleCanvas', 'extags', o);
    }
    function tcPause() { TagCanvas.Pause('exampleCanvas'); }
    function tcResume() { TagCanvas.Resume('exampleCanvas'); }
    function tcReload() { TagCanvas.Reload('exampleCanvas'); }
    function tcUpdate() { TagCanvas.Update('exampleCanvas'); }
    function tcFront() {
      TagCanvas.TagToFront('exampleCanvas', { index: 0, active: 1 });
    }
    function tcRotate() {
      TagCanvas.RotateTag('exampleCanvas', {
        index: Math.floor(Math.random() * 5), lat: -60, lng: -60, time: 800, active: 1
      });
    }
    function tcSpeed() {
      var a = Math.random() * Math.PI * 2, b = 0.1 + Math.random() * 0.9;
      TagCanvas.SetSpeed('exampleCanvas', [b * Math.sin(a), b * Math.cos(a)]);
    }
    function changeColor() {
      o.textColour = 'yellow';
      TagCanvas.Start('exampleCanvas', 'extags', o);
    }
    function changeBorderW() {
      o.weightMode = 'bgoutline';
      o.bgOutlineThickness = 3;
      TagCanvas.Start('exampleCanvas', 'extags', o);
    }
    function changePadding() {
      o.padding = '10';
      TagCanvas.Start('exampleCanvas', 'extags', o);
    }
    function changeRadius() {
      o.bgRadius = '8';
      TagCanvas.Start('exampleCanvas', 'extags', o);
    }
    function outline() {
      o.weightMode = 'outline';
      o.bgOutlineThickness = 0;
      o.padding = 0;
      o.bgRadius = 0;
      TagCanvas.Start('exampleCanvas', 'extags', o);
    }

    window.onload = function () {
      TagCanvas.Start('exampleCanvas', 'extags', o);
    }

    $('body').on('click', 'a', function (e) {
      e.preventDefault()
      console.log(1);

    })
  </script>
</body>

</html>