溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關HTML5畫布下如何實現js的文字云/標簽云效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
如果你想創建漂亮的文字云或者標簽云效果的話，你可以考慮使用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來設置字體風格。如果你能夠應用到自己的網站中，肯定能夠給你的網站增色不少！
關于“HTML5畫布下如何實現js的文字云/標簽云效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
