• 技术文章 >web前端 >H5教程

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

    ringa_leeringa_lee2018-05-12 15:04:14原创4359

    title.jpg

    如果你想创建漂亮的文字云或者标签云效果的话,你可以考虑使用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();

    复制代码
    文字,字体和字体大小,旋转和边框距离都可以自定义。包含两个事件:

    当然,支持web字体,你可以使用@font-face来设置字体风格。如果你能够应用到自己的网站中,肯定能够给你的网站增色不少!
    查看演示:http://www.jasondavies.com/wordcloud/#http%3A%2F%2Fen.wikipedia.org%2Fwiki%2F%7Bword%7D=html5cn

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:使用HTML5 Notication API实现一个定时提醒工具 下一篇:HTML5游戏开发 之 循环的控制(3)
    Web大前端开发直播班

    相关文章推荐

    • 2015-2016前端架构体系技术精简版• 在今天,利用 HTML5 开发和发布大型跨平台网游,可行性如何?要解决哪些问题?• 为什么html5将主宰在线视频?• phonegap使用方法介绍(八)操作数据库• 基于Modernizr 让网站进行优雅降级的分析_html5教程技巧

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网