是唯一靠谱的载体，因其支持像素级控制以实现文字避让、旋转、权重缩放和碰撞检测；其他方案如布局无法动态判断重叠，浏览器也无自动排布API。
HTML 本身不支持文字云效果，必须用 JavaScript 渲染到 <canvas></canvas> 上；直接写 HTML 标签堆砌只是静态列表，不是词云。
为什么 <canvas></canvas> 是唯一靠谱的载体
词云的核心逻辑——文字避让、旋转、权重缩放、碰撞检测——全靠 JS 实时计算，<div> 或 <code><span></span> 布局无法动态判断是否重叠。浏览器原生不提供“自动排布不重叠文字”的 API，<canvas></canvas> 提供像素级控制，wordcloud2.js 正是基于它实现的。
常见误区：
- 用 CSS
flex+font-size硬编码模拟：只能做静态标签云，词一多就重叠、无角度、无避让 - 把整段文本直接传给
WordCloud()：会当成一个超长“词”，放大显示成一行巨字 - 在 Node.js 环境下运行
wordcloud2.js：报错canvas is not defined，它只在浏览器里跑
wordcloud2.js 数据格式必须是二维数组
传入的数据必须是形如 [["前端", 42], ["JavaScript", 35], ["CSS", 28]] 的数组，不能是对象 {前端: 42, JavaScript: 35}，否则会抛出 TypeError: words[i] is undefined。
立即学习“前端免费学习笔记（深入）”；
中文场景特别注意：
Work Productivity Word Mail Workflow Helper
下载
构建并排查Microsoft Word邮件合并及DOCX模板工作流，使用合并域、内容控件、文档属性、重复区块、数据等
- 它不自动分词，你得先用
jieba（Python）或nodejieba（Node）/ 浏览器端segmentit把原文切好，再统计频次 - 中文词频数据里不能含空格、换行、制表符，否则渲染时断字或跳位
- 词太长（如“低噪音运行模块化装配”）会导致单个词占满画布，建议预处理截断或过滤长度 > 6 的字符串
中文字体和 fontFamily 必须显式声明且预加载
wordcloud2.js 不等字体加载完成就开画，中文字体没就绪时会出现空白、方块、截断。不能只写 fontFamily: "sans-serif"。
安全做法：
- 显式指定系统中文字体：
fontFamily: "Microsoft YaHei, PingFang SC, Noto Sans CJK SC, sans-serif" - 用
document.fonts.load()预检（尤其在 SPA 中）：document.fonts.load("16px 'Microsoft YaHei'").then(() => { WordCloud(canvas, { list: wordList, ... }); }); - 避免用 Web Font（如 Google Fonts），加载延迟不可控，词云可能先画一遍再闪动重绘
导出图片别用 toDataURL()，改用 toBlob()
长词云生成的 base64 字符串极长，Chrome 限制 URI 长度，触发 SecurityError。这不是 bug，是浏览器主动拦截。
正确导出方式：
- 用
canvas.toBlob(callback, "image/png", 0.95)，回调里用URL.createObjectURL()创建下载链接 - 若需高分辨率图，先临时放大 canvas 的
width/height属性（非 CSS），再调用toBlob()，最后还原 - 服务端截图（如 Puppeteer）不适用此场景——词云是纯前端动态渲染，服务端无 canvas 上下文
最易被忽略的一点：词云不是“画完就结束”，它是持续占用 CPU 做布局计算的。如果词数 > 500 或 gridSize 设得太小（如
