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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！