基于tagcanvas做一个酷炫的词云效果基于Tagcanvas做一个酷炫的词云效果在现代Web开发中，词云是一种非常

基于Tagcanvas做一个酷炫的词云效果

在现代Web开发中，词云是一种非常直观且有趣的数据可视化方式。它不仅能展示词频，还能为用户提供互动性。今天我们将使用Tagcanvas库，来创建一个炫酷的词云效果。

Tagcanvas简介

Tagcanvas是一个基于HTML5 Canvas的JavaScript库，可以用来创建动态的3D标签云和词云效果。它具有轻量级、易于使用和高度可定制的特点。

官方网站: Tagcanvas

项目初始化

首先，我们需要创建一个新的项目文件夹，并初始化我们的项目。假设我们使用的是VSCode。

mkdir tagcanvas-wordcloud
cd tagcanvas-wordcloud
code .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tagcanvas 词云效果</title>
    <script src="https://www.goat1000.com/tagcanvas.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        #myCanvasContainer {
            width: 80%;
            height: 80%;
        }
        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="myCanvasContainer">
        <canvas id="myCanvas" width="800" height="600"></canvas>
    </div>
</body>
</html>

创建词云数据

接下来，我们需要在HTML中定义我们的词云数据。在<body>标签中，添加一个列表元素来包含我们的词云词汇：

    <ul id="tags" style="display:none;"> 
        <li><a href="#" data-weight="30">JavaScript</a></li> 
        <li><a href="#" data-weight="25">HTML5</a></li> 
        <li><a href="#" data-weight="20">CSS3</a></li> 
        <li><a href="#" data-weight="15">React</a></li> 
        <li><a href="#" data-weight="10">Vue</a></li> 
        <li><a href="#" data-weight="5">Angular</a></li> 
    </ul>

渲染词云

在<body>标签的底部添加一个<script>标签，并编写如下JavaScript代码来初始化Tagcanvas并渲染词云：

<script>
    window.onload = function() {
        if (!TagCanvas.start('myCanvas', 'tags', {
            textColour: '#000000',
            outlineColour: '#ff00ff',
            reverse: true,
            depth: 0.8,
            maxSpeed: 0.05
        })) {
            // TagCanvas failed to load
            document.getElementById('myCanvasContainer').style.display = 'none';
        }
    };
</script>

优化和美化

我们可以进一步优化和美化词云的效果，例如调整颜色、字体、旋转速度等。以下是一些可能的改进也可以放一些图片进去，：

<script>
    window.onload = function() {
        if (!TagCanvas.start('myCanvas', 'tags', {
            textColour: '#ff0000',
            outlineColour: '#0000ff',
            reverse: true,
            depth: 0.8,
            maxSpeed: 0.07,
            initial: [0.1, -0.1],
            decel: 0.95,
            shadow: '#000',
            shadowBlur: 3,
            weight: true,
            weightMode: 'both',
            weightFrom: 'data-weight'
        })) {
            document.getElementById('myCanvasContainer').style.display = 'none';
        }
    };
</script>

效果展示

完成上述步骤后，我们就能在浏览器中看到一个动态旋转的词云效果了。你可以根据需求调整词汇和权重，以实现更丰富的视觉效果；我在这里就放一些Mock生成的的图片

基于tagcanvas做一个酷炫的词云效果