HTML5 Word Cloud 进阶技巧：10 个玩转主题、形状与字体大小的实用技巧

HTML5 Word Cloud 进阶技巧10 个玩转主题、形状与字体大小的实用技巧【免费下载链接】wordcloudHTML5 Word Cloud项目地址: https://gitcode.com/gh_mirrors/word/wordcloudHTML5 Word CloudHTML5 词云是一款基于 HTML5 Canvas 的免费词云工具输入一篇文章它就能自动生成漂亮的词云图并支持一键切换主题、更换形状、调节字体大小最后导出为 PNG 图片或生成可分享的链接。对于想在博客、课件或报告中展示文本关键词的读者来说这是最简单好用的浏览器端词云生成方案无需安装任何软件。先认识 4 个核心设置所有高级效果都由四个参数控制它们集中定义在 assets/app.js 中参数作用取值theme主题字体 配色 背景共 11 套随机轮转shape词云轮廓形状圆形、方形、三角形、星形weightFactor字体大小缩放系数默认 0.1 递增gridSize词与词之间的网格间距最小值为 2在网页的操作面板上这 4 个参数分别对应换主题、换形状、字号放大/缩小、疏密调节按钮逻辑见 assets/dashboard-view.js。技巧 1一键循环切换 11 套配色主题点击Switch Theme按钮即可在 11 套精心设计的主题间循环。每套主题包含三部分字体族衬线Serif或无衬线Sans-Serif字体栈自动适配中英文配色方案如 Sublime Text 2 经典配色、海洋蓝、奶油橙等背景色从深色#272822到浅色#e3e9fd都有 小技巧主题列表还支持传入自定义颜色生成函数想换配色直接改 assets/app.js 中的themes数组即可。技巧 2用 shape 函数画出任意轮廓内置 4 种形状circle圆形、star星形、triangle-forward三角形以及一个用三角函数手写的方形方形通过角度余弦/正弦计算边距词会填满整块方形区域星形和三角形可设置ellipticity椭圆度微调拉伸效果⭐ 进阶玩法shape其实是一个接收角度、返回半径的函数理论上你可以写代码画出心形、五角星等任意轮廓。技巧 3用 weightFactor 精确控制字体大小字体大小由weightFactor决定网页上每点一次Enlarge按钮系数就0.1。其默认值由屏幕尺寸与文本总量自动计算见 assets/app.js 的calculateWeightFactor 经验值系数太小词云缩成一团太大则边缘词被挤出画布。先保持默认再按需微调 0.1~0.3 即可。技巧 4用 gridSize 调节词的疏密程度gridSize是词云防碰撞的网格边长像素默认 4点Dispersegap数值增大词云更稀疏、留白更多点Gather Upgap-数值减小词云更紧凑最小到 2 想要满屏词的密集海报感就把间距调小想要清爽的演示稿就调大。技巧 5重新洗牌——每次刷新都是新随机主题每次点击Refresh系统会重新随机抽取一套主题再渲染Math.floor(Math.random() * themes.length)。同一段文字、同一形状每次刷新配色都不同多刷几次总有一套你喜欢的。技巧 6先删掉噪音词再画词云点Edit List进入词表编辑可以直接删除的、了、the等无意义高频词或手动补上你希望突出的关键词权重填大一点。这是让词云说人话最关键的一步。技巧 7鼠标悬停查看词语出现次数渲染完成后把鼠标移到任意单词上会出现高亮框和提示标签显示该词及其出现次数实现见 assets/canvas-view.js 的handleHover。给观众讲数据时非常好用。技巧 8鼠标移动产生 3D 视差倾斜效果在桌面端把鼠标在画布上移动整张词云会随鼠标位置轻微旋转rotateX/rotateY最大倾斜 10 度并放大 1.2 倍产生立体悬浮感。这个动效只对非触屏设备启用手机用户看到的是静态大图。技巧 9导出 PNG 图片离线使用点Save to disk会把画布通过canvas.toDataURL()导出为wordcloud.png下载。老浏览器会自动弹出一个空白窗口展示图片右键另存即可对应 assets/dashboard-view.js 的 save 分支。技巧 10通过 URL 分享同款词云应用采用 URL hash 路由如#text:...点Share生成链接后任何人打开同一链接都能还原词云并继续在其基础上换主题、调大小。词频统计由 assets/wordfreq/ 下的 wordfreq 库完成英文还会做词干还原Porter Stemming避免 running / runs / ran 各占一席。快速上手清单 ✅打开应用粘贴文章或选择数据源Wikipedia、Facebook 等见 assets/fetchers.js等词频分析完成进入操作面板用Edit List删掉噪音词循环切换主题与形状找到最顺眼的组合微调字号与间距 → 保存 PNG 或分享链接整套流程完全在浏览器内完成数据不出本地除调用你主动选择的远端数据源免费、快速、零安装。项目文件导览应用主逻辑主题、形状、路由assets/app.js词云画布与交互悬停、3D 倾斜assets/canvas-view.js操作面板按钮换主题/形状、字号、间距、保存assets/dashboard-view.js词云核心库目录assets/wordcloud2.js/词频计算库目录assets/wordfreq/页面入口index.html【免费下载链接】wordcloudHTML5 Word Cloud项目地址: https://gitcode.com/gh_mirrors/word/wordcloud创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考