HTML5画布下如何实现js的文字云/标签云效果-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

HTML5画布下如何实现js的文字云/标签云效果-创新互联

这篇文章将为大家详细讲解有关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的文字云/标签云效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


    分享标题:HTML5画布下如何实现js的文字云/标签云效果-创新互联
    当前路径:http://kswsj.cn/article/djpphs.html

    其他资讯