HTML5教程

当前位置: HTML5技术网 > HTML5教程 > HTML5画布下js的文字云/标签云效果 - D3 Cloud

HTML5画布下js的文字云/标签云效果 - D3 Cloud



       如果你想创建漂亮的文字云或者标签云效果的话,你可以考虑使用D3-Cloud,这是一个超棒的开源字体云效果javascript类库,基于知名的D3.js,能够帮助你生成类似wordle.com风格的字体或者标签云效果。

       这个类库使用HTML5画布来生成字体效果,整个布局算法可以异步实现,只需要设置时间块大小。并且支持动画特效。整体性能非常不错。

       配置如下

  1. var fontSize = d3.scale.log().range([10, 100]);

  2. var layout = cloud()
  3.       .size([960, 600])
  4.       .timeInterval(10)
  5.       .text(function(d) { return d.key; })
  6.       .font("Impact")
  7.       .fontSize(function(d) { return fontSize(+d.value); })
  8.       .rotate(function(d) { return ~~(Math.random() * 5) * 30 - 60; })
  9.       .padding(1)
  10.       .on("word", progress)
  11.       .on("end", draw)
  12.       .words([…])
  13.       .start();
复制代码
       文字,字体和字体大小,旋转和边框距离都可以自定义。包含两个事件:

  • word - 当每一个文字添加后触发
  • end - 当全部文字添加后触发

       当然,支持web字体,你可以使用@font-face来设置字体风格。如果你能够应用到自己的网站中,肯定能够给你的网站增色不少!



查看演示:http://www.jasondavies.com/wordcloud/#http%3A%2F%2Fen.wikipedia.org%2Fwiki%2F%7Bword%7D=html5cn


【HTML5画布下js的文字云/标签云效果 - D3 Cloud】相关文章

1. HTML5画布下js的文字云/标签云效果 - D3 Cloud

2. 音频界YouTube -SoundCloud发布HTML 5部件

3. 使用HTML5画布(canvas)生成阴影效果

4. 使用HTML5画布实现的超棒javascript动画仪表板:gauge.js

5. 未来将基于HTML5 Jolicloud Me Beta推出

6. 苹果10亿美元建大型数据中心用于iCloud云服务

7. 苹果iCloud云会成为管理员噩梦?

8. PaaS发展如火如荼 CloudSwingPaaS发布

9. 三分钟HTML5画布(Canvas)动画教程

10. HTML5画布(CANVAS)速查简表

本文来源:https://www.51html5.com/a661.html

点击展开全部

﹝HTML5画布下js的文字云/标签云效果 - D3 Cloud﹞相关内容

「HTML5画布下js的文字云/标签云效果 - D3 Cloud」相关专题

其它栏目

也许您还喜欢