溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關HTML5畫布下如何實現(xiàn)js的文字云/標簽云效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
如果你想創(chuàng)建漂亮的文字云或者標簽云效果的話，你可以考慮使用D3-Cloud，這是一個超棒的開源字體云效果javascript類庫，基于知名的D3.js，能夠幫助你生成類似wordle.com風格的字體或者標簽云效果。
這個類庫使用HTML5畫布來生成字體效果，整個布局算法可以異步實現(xiàn)，只需要設置時間塊大小。并且支持動畫特效。整體性能非常不錯。
配置如下
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)和邊框距離都可以自定義。包含兩個事件：
word - 當每一個文字添加后觸發(fā)
end - 當全部文字添加后觸發(fā)
當然，支持web字體，你可以使用@font-face來設置字體風格。如果你能夠應用到自己的網(wǎng)站中，肯定能夠給你的網(wǎng)站增色不少！
關于“HTML5畫布下如何實現(xiàn)js的文字云/標簽云效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
