13518219792
这篇文章将为大家详细讲解有关HTML5画布下如何实现js的文字云/标签云效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联建站是一家以网络技术公司，为中小企业提供网站维护、网站建设、成都做网站、网站备案、服务器租用、国际域名空间、软件开发、微信小程序开发等企业互联网相关业务，是一家有着丰富的互联网运营推广经验的科技公司，有着多年的网站建站经验，致力于帮助中小企业在互联网让打出自已的品牌和口碑，让企业在互联网上打开一个面向全国乃至全球的业务窗口：建站联系电话：18980820575
如果你想创建漂亮的文字云或者标签云效果的话，你可以考虑使用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的文字云/标签云效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
