HTML无原生词云组件，需依赖JavaScript库实现；主流方案为d3-cloud（灵活但需手写布局）和wordcloud2.js（轻量、开箱即用、中文支持好），核心渲染均在JS中完成。
HTML里没有原生词云组件，得靠JavaScript库
浏览器本身不支持直接用HTML标签画词云，<canvas> 或 <svg> 只是画布，真正布局文字大小、角度、避让碰撞，全靠JS逻辑。主流方案就两个：d3-cloud（基于D3，灵活但需手写布局）和 wordcloud2.js（轻量、开箱即用、中文支持好）。别被“HTML词云”误导——你写的还是HTML页面，但核心渲染在JS里。
用 wordcloud2.js 三步跑起来（含中文坑）
它对中文友好，但默认不自动分词，得自己把词频对象准备好。常见错误是传入一整段文本，结果整个句子当一个“词”放大显示。
- 先引入：
<script src="https://cdn.jsdelivr.net/npm/wordcloud2@1.1.1/dist/wordcloud2.min.js"></script>
- 准备数据：必须是
[["苹果", 24], ["香蕉", 17], ["橙子", 9]]这样的二维数组，不能是对象{苹果: 24, 香蕉: 17}（会报TypeError: words[i] is undefined） - 挂载到 canvas：
<canvas id="wordcloud"></canvas><br><script><br> WordCloud(document.getElementById('wordcloud'), {<br> list: [["前端", 42], ["JavaScript", 35], ["CSS", 28]],<br> gridSize: 4,<br> weightFactor: 2,<br> fontFamily: "Microsoft YaHei, sans-serif", // 中文字体必须显式设<br> color: function() { return "#2c3e50"; }<br> });<br></script>
d3-cloud 更自由，但也更易卡在布局参数上
适合需要精确控制每个词旋转角度、位置偏移或绑定点击事件的场景。但它不处理字体加载，中文字体没加载完就画，会出现文字截断或空白。
-
fontSize是函数，不是固定值，比如：fontSize: d => d.size * 16，其中d.size是你数据里的权重字段 - 中文必须配
fontFamily且确保该字体已加载完成，否则用document.fonts.load("16px 'PingFang SC'")做预检 - 避让算法依赖
spiral函数，默认archimedean对密集词云效果差，可换rectangular提升填充率 - 导出图片要用
canvas.toBlob()，别直接toDataURL()——长词云容易触发Chrome的URI长度限制，报SecurityError
词频数据从哪来？别在前端硬分词
浏览器里用正则切中文（比如 text.match(/[\u4e00-\u9fa5]+/g)）只能应付简单场景。真实项目里，“人工智能”和“人工”会被同时匹配，造成词频污染。更稳的做法：
立即学习“前端免费学习笔记（深入）”；
- 后端预处理：Python用
jieba、Node用nodejieba分词+停用词过滤，返回干净的[{"text": "词云", "weight": 12}] - 前端只做渲染，不碰分词逻辑——避免用户粘贴富文本时把HTML标签当词计入
- 如果必须前端分，至少加个最小长度过滤：
words.filter(w => w.length >= 2)，单字词（如“的”“是”）基本无意义
实际部署时最容易忽略的是字体 fallback 和 canvas 尺寸响应式。设了 fontFamily: "Noto Sans CJK"，但用户没装，又没写 , sans-serif，词就全变成方块。canvas 宽高用百分比或 JS 监听 resize 重绘，不然窗口缩小时词云溢出容器——这些细节不处理，第一眼看着能动，第二眼就露馅。
