如果你想创建漂亮的文字云或者标签云效果的话,你可以考虑使用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