這篇文章將為大家詳細(xì)講解有關(guān)HTML5畫布下如何實(shí)現(xiàn)js的文字云/標(biāo)簽云效果，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司服務(wù)緊隨時(shí)代發(fā)展步伐，進(jìn)行技術(shù)革新和技術(shù)進(jìn)步，經(jīng)過十多年的發(fā)展和積累，已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計(jì)師、專業(yè)的網(wǎng)站實(shí)施團(tuán)隊(duì)以及高素質(zhì)售后服務(wù)人員，并且完全形成了一套成熟的業(yè)務(wù)流程，能夠完全依照客戶要求對(duì)網(wǎng)站進(jìn)行成都做網(wǎng)站、網(wǎng)站制作、建設(shè)、維護(hù)、更新和改版，實(shí)現(xiàn)客戶網(wǎng)站對(duì)外宣傳展示的首要目的，并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。

如果你想創(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è)事件：

• word - 當(dāng)每一個(gè)文字添加后觸發(fā)

  
  

• end - 當(dāng)全部文字添加后觸發(fā)

當(dāng)然，支持web字體，你可以使用@font-face來設(shè)置字體風(fēng)格。如果你能夠應(yīng)用到自己的網(wǎng)站中，肯定能夠給你的網(wǎng)站增色不少！

關(guān)于“HTML5畫布下如何實(shí)現(xiàn)js的文字云/標(biāo)簽云效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

當(dāng)前名稱：HTML5畫布下如何實(shí)現(xiàn)js的文字云/標(biāo)簽云效果-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://weahome.cn/article/djpphs.html