奥丁9

后端
- 数据库
  - redis
  - mysql
  - mongoDB
  - 达梦
- php
  - laravel
    - laravel-admin
    - dcat
      - 表单
      - 表格
- java
  - spring
- python
- go
- c
- c++
前端
- vue
- nodejs
- sass/less
- html/css
- 前端框架
- javascript
- 微信生态
  - 公众号
  - 小程序
- uniapp
- typescript
其他
- AI
- 数据结构
- 安全
- linux
- seo
- git
- 健身
- 算法
- 正则表达式
- docker
待分类

前端 / javascript

tagcanvas插件实现标签云效果

1年前 aoding9 59

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TagCanvas Demo</title>
    <script src="tagcanvas.min.js"></script> 
</head>
<body>
    <canvas id="myCanvas" width="800" height="600"></canvas> 
    <script>
        window.onload = function() {
            TagCanvas.textColour = '#333'; // 文字颜色
            TagCanvas.textFont = 'Helvetica, Arial, sans-serif'; // 字体
            TagCanvas.textSizeMin = 12; // 最小字号
            TagCanvas.textSizeMax = 36; // 最大字号
            TagCanvas.outlineColour = '#ddd'; // 描边颜色
            TagCanvas.outlineThickness = 1; // 描边宽度
            TagCanvas.maxSpeed = 0.06; // 最大速度
            TagCanvas.minBrightness = 0.2; // 最小亮度
            TagCanvas.depth = 0.92; // 深度
			TagCanvas.dragControl = false; // 关闭拖放控制
			TagCanvas.textVAlign = null; // 垂直对齐方式
			TagCanvas.textHAlign = null; // 水平对齐方式
			TagCanvas.dragFriction = 0.15; // 阻力系数
			TagCanvas.initial = [0.1, -0.1]; // 初始旋转速度和方向(自动开始旋转)

try {
                TagCanvas.Start('myCanvas', 'tags', { // 容器ID，标签ID
                    textFont: null,
                    reverse: true,
                    depth: 0.8,
                    weight: true,
                    weightFrom: 'data-weight',
                    weightSize: 1
                });
            } catch(e) {
                console.log(e);
            }
        };
    </script>
    <div id="tags" style="display:none;"> 
        <a href="#" data-weight="16">JavaScript</a>
        <a href="#" data-weight="10">HTML</a>
        <a href="#" data-weight="4">CSS</a>
        <a href="#" data-weight="7">Node.js</a>
        <a href="#" data-weight="9">AngularJS</a>
        <a href="#" data-weight="5">React</a>
        <a href="#" data-weight="8">jQuery</a>
        <a href="#" data-weight="12">PHP</a>
        <a href="#" data-weight="6">Bootstrap</a>
        <a href="#" data-weight="3">Python</a>
    </div>
</body>
</html>

```

本作品采用《CC 协议》，转载必须注明作者和本文链接