HTML5画布下js的文字云标签云效果-D3 Cloud

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

HTML5画布下js的文字云标签云效果-D3 Cloud

如果你想创建漂亮的文字云或者标签云效果的话,你可以考虑使用D3-Cloud,这是一个超棒的开源字体云效果javascript类库,基于知名的D3.js,能够帮助你生成类似wordle.com风格的字体或者标签云效果。 这个类库使用HTML5画布来生成字体效果,整个布局算法可以异步实现,只需要设置时间块大小。并且支持动画特效。整体性能非常不错。 配置如下

var fontSize = d3.scale.log().range([10, 100]);var layout = cloud()      .size([960, 600])      .timeInterval(10)      .text(function(d) { return d.key; })      .font("Impact")      .fontSize(function(d) { return fontSize(+d.value); })      .rotate(function(d) { return ~~(Math.random() * 5) * 30 - 60; })      .padding(1)      .on("word", progress)      .on("end", draw)      .words([…])      .start();
登录后复制

复制代码 文字,字体和字体大小,旋转和边框距离都可以自定义。包含两个事件:

word - 当每一个文字添加后触发

end - 当全部文字添加后触发

当然,支持web字体,你可以使用@font-face来设置字体风格。如果你能够应用到自己的网站中,肯定能够给你的网站增色不少!查看演示:http://www.jasondavies.com/wordcloud/#http%3A%2F%2Fen.wikipedia.org%2Fwiki%2F%7Bword%7D=html5cn

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。

作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:css如何写渐变的边框
下一篇:什么是libuv,浅析libuv中的事件轮询(Node核心依赖)

发表评论

关闭广告
关闭广告