如果你想創(chuàng)建漂亮的文字云或者標(biāo)簽云效果的話，你可以考慮使用D3-Cloud，這是一個(gè)超棒的開源字體云效果javascript類庫，基于知名的D3.js，能夠幫助你生成類似wordle.com風(fēng)格的字體或者標(biāo)簽云效果。
這個(gè)類庫使用HTML5畫布來生成字體效果，整個(gè)布局算法可以異步實(shí)現(xiàn)，只需要設(shè)置時(shí)間塊大小。并且支持動(dòng)畫特效。整體性能非常不錯(cuò)。

配置如下

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();

文字，字體和字體大小，旋轉(zhuǎn)和邊框距離都可以自定義。包含兩個(gè)事件：

當(dāng)然，支持web字體，你可以使用@font-face來設(shè)置字體風(fēng)格。如果你能夠應(yīng)用到自己的網(wǎng)站中，肯定能夠給你的網(wǎng)站增色不少！
查看演示：http://www.jasondavies.com/wordcloud/#http%3A%2F%2Fen.wikipedia.org%2Fwiki%2F%7Bword%7D=html5cn

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com