登录  /  注册
首页 > web前端 > H5教程 > 正文

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

ringa_lee
发布: 2018-05-12 15:04:14
原创
5694人浏览过

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();
登录后复制

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

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

  • end - 当全部文字添加后触发

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


    智能AI问答
    PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号