声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！

　　最近开始用canvas搞3D了，搞得也是简单的东西，就是球体转圈。做出来后，突然想起以前看过的3D标签云，在以前觉得真心狂拽酷炫叼啊，当时也确实不知道怎么在平面上模拟3D，所以也就没去搞了。现在刚好用了canvas搞3D，也发现，好像3D标签云也差不多，然后就写了一下。

　　具体怎么做呢，先说一下原理，3D标签云就是做一个球面，然后再球面上取均匀分布的点，把点坐标赋给标签，再根据抽象出来的Z轴大小来改变标签的字体大小，透明度，做出立体感觉，然后球体就做好了。关键代码就下面这几句：

  1.  function innit(){
  2.              for(var i=0;i<tagEle.length;i++){
  3.                  var a , b;
  4.                  var k = -1+(2*(i+1)-1)/tagEle.length;
  5.                  var a = Math.acos(k);
  6.                  var b = a*Math.sqrt(tagEle.length*Math.PI);
  7.                  // var a = Math.random()*2*Math.PI;
  8.                  // var b = Math.random()*2*Math.PI;
  9.                  var x = RADIUS * Math.sin(a) * Math.cos(b);
  10.                  var y = RADIUS * Math.sin(a) * Math.sin(b);
  11.                  var z = RADIUS * Math.cos(a);
  12.                  var t = new tag(tagEle[i] , x , y , z);
  13.                  tagEle[i].style.color = "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
  14.                  tags.push(t);
  15.                  t.move();
  16.              }
  17.          }

上面的代码是用于生成球面上的点的x,y,z轴的坐标。用到的就是简单的球面方程：已知半径r和球心，一般为了方便，我们都以坐标轴原点为球心，有下面三个方程

　x=r*sinθ*cosΦ   y=r*sinθ*sinΦ   z=r*cosθ;

也就是说，我们可以对θ和Φ取随机数，来获得圆上的随机点坐标。但仅此还不够，因为如果要做3D标签云，一个很重要点的就是平均分布。如果单纯的取随机坐标，会导致一些标签重叠，相对来说就没那么美观了。所以我们引入第二个公式：

θ = arccos( ((2*num)-1)/all - 1);

Φ = θ*sqrt(all * π);

num是当前第几个点，all则是点的总数。这个公式的是我在别人的代码里找到的，我也不懂原理。不过确实好用。

有了上面两个公式以后，我们就可以获得球面上所需要的平均分布的点。然后再对每个标签进行操作：

  1.  var scale = fallLength/(fallLength-this.z);
  2.  var alpha = (this.z+RADIUS)/(2*RADIUS);
  3.  this.ele.style.fontSize = 15 * scale + "px";
  4.  this.ele.style.opacity = alpha+0.5;
  5.  this.ele.style.filter = "alpha(opacity = "+(alpha+0.5)*100+")";
  6.  this.ele.style.zIndex = parseInt(scale*100);
  7.  this.ele.style.left = this.x + CX - this.ele.offsetWidth/2 +"px";
  8.  this.ele.style.top = this.y + CY - this.ele.offsetHeight/2 +"px";
  1. fallLength是焦距，也就是一个常量，scale和alpha都是要根据z轴来调整的比例。后面的属性操作就比较简单了，调整一下字体大小，透明度，以及元素位置，球体就做出来了，效果如下（忽略字的内容，乱写的）：

球体做出来了，是时候让其动起来了。这时就引入第三个公式了，矩阵旋转算法:

还可以直接戳 计算机图形学3D变换；

然后，我们就可以写出两个函数，一个是绕X轴旋转，一个是绕Y轴旋转。

  1.  function rotateX(){
  2.              var cos = Math.cos(angleX);
  3.              var sin = Math.sin(angleX);
  4.              tags.forEach(function(){
  5.                  var y1 = this.y * cos - this.z * sin;
  6.                  var z1 = this.z * cos + this.y * sin;
  7.                  this.y = y1;
  8.                  this.z = z1;
  9.              })
  10.  
  11.          }
  12.  
  13.          function rotateY(){
  14.              var cos = Math.cos(angleY);
  15.              var sin = Math.sin(angleY);
  16.              tags.forEach(function(){
  17.                  var x1 = this.x * cos - this.z * sin;
  18.                  var z1 = this.z * cos + this.x * sin;
  19.                  this.x = x1;
  20.                  this.z = z1;
  21.              })
  22.          }

然后就可以通过控制angleX和angleY两个角度的值来控制标签云的旋转方向以及旋转速度，角度的正负值控制旋转方向，大小控制旋转速度。

接下来就可以用鼠标事件来控制了：

  1.  if("addEventListener" in window){
  2.              paper.addEventListener("mousemove" , function(event){
  3.                  var x = event.clientX - EX - CX;
  4.                  var y = event.clientY - EY - CY;
  5.                  // angleY = -x* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);
  6.                  // angleX = -y* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);
  7.                  angleY = x*0.0001;
  8.                  angleX = y*0.0001;
  9.              });
  10.          }
  11.          else {
  12.              paper.attachEvent("onmousemove" , function(event){
  13.                  var x = event.clientX - EX - CX;
  14.                  var y = event.clientY - EY - CY;
  15.                  angleY = x*0.0001;
  16.                  angleX = y*0.0001;
  17.              });
  18.          }

当这个也写好后，3D标签云就算完工了，完成效果就直接看DEMO吧：3D标签云；

下面贴出标签云的所有代码，其实都可以通过控制台看代码，不过还是贴一下吧：（本人技术不是很好，代码写的不好请见谅）

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3.  <head>
  4.      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5.      <style>
  6.          .tagBall{
  7.              width: 800px;
  8.              height: 800px;
  9.              margin:50px auto;
  10.              position: relative;
  11.          }
  12.          .tag{
  13.              display: block;
  14.              position: absolute;
  15.              left: 0px;
  16.              top: 0px;
  17.              color: #000;
  18.              text-decoration: none;
  19.              font-size: 15px;
  20.              font-family: "微软雅黑";
  21.              font-weight: bold;
  22.          }
  23.          .tag:hover{border:1px solid #666;}
  24.      </style>
  25.      <title>3D标签</title>
  26.  </head>
  27.  <body>
  28.      <div class="tagBall">
  29.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  30.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  31.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  32.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  33.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  34.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  35.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  36.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  37.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  38.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  39.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  40.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  41.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  42.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  43.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  44.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  45.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  46.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  47.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  48.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  49.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  50.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  51.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  52.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  53.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  54.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  55.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  56.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  57.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  58.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  59.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  60.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  61.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  62.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  63.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  64.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  65.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  66.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  67.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  68.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  69.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  70.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  71.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  72.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  73.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
  74.          <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜欢你</a>
  75.      </div>
  76.      <script>
  77.          var tagEle = "querySelectorAll" in document ? document.querySelectorAll(".tag") : getClass("tag"),
  78.              paper = "querySelectorAll" in document ? document.querySelector(".tagBall") : getClass("tagBall")[0];
  79.              RADIUS =300,
  80.              fallLength = 500,
  81.              tags=[],
  82.              angleX = Math.PI/500,
  83.              angleY = Math.PI/500,
  84.              CX = paper.offsetWidth/2,
  85.              CY = paper.offsetHeight/2,
  86.              EX = paper.offsetLeft + document.body.scrollLeft + document.documentElement.scrollLeft,
  87.              EY = paper.offsetTop + document.body.scrollTop + document.documentElement.scrollTop;
  88.  
  89.          function getClass(className){
  90.              var ele = document.getElementsByTagName("*");
  91.              var classEle = [];
  92.              for(var i=0;i<ele.length;i++){
  93.                  var cn = ele[i].className;
  94.                  if(cn === className){
  95.                      classEle.push(ele[i]);
  96.                  }
  97.              }
  98.              return classEle;
  99.          }
  100.  
  101.          function innit(){
  102.              for(var i=0;i<tagEle.length;i++){
  103.                  var a , b;
  104.                  var k = (2*(i+1)-1)/tagEle.length - 1;
  105.                  var a = Math.acos(k);
  106.                  var b = a*Math.sqrt(tagEle.length*Math.PI);
  107.                  // var a = Math.random()*2*Math.PI;
  108.                  // var b = Math.random()*2*Math.PI;
  109.                  var x = RADIUS * Math.sin(a) * Math.cos(b);
  110.                  var y = RADIUS * Math.sin(a) * Math.sin(b);
  111.                  var z = RADIUS * Math.cos(a);
  112.                  var t = new tag(tagEle[i] , x , y , z);
  113.                  tagEle[i].style.color = "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
  114.                  tags.push(t);
  115.                  t.move();
  116.              }
  117.          }
  118.  
  119.          Array.prototype.forEach = function(callback){
  120.              for(var i=0;i<this.length;i++){
  121.                  callback.call(this[i]);
  122.              }
  123.          }
  124.  
  125.          function animate(){
  126.              setInterval(function(){
  127.                  rotateX();
  128.                  rotateY();
  129.                  tags.forEach(function(){
  130.                      this.move();
  131.                  })
  132.              } , 17)
  133.          }
  134.  
  135.          if("addEventListener" in window){
  136.              paper.addEventListener("mousemove" , function(event){
  137.                  var x = event.clientX - EX - CX;
  138.                  var y = event.clientY - EY - CY;
  139.                  // angleY = -x* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);
  140.                  // angleX = -y* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);
  141.                  angleY = x*0.0001;
  142.                  angleX = y*0.0001;
  143.              });
  144.          }
  145.          else {
  146.              paper.attachEvent("onmousemove" , function(event){
  147.                  var x = event.clientX - EX - CX;
  148.                  var y = event.clientY - EY - CY;
  149.                  angleY = x*0.0001;
  150.                  angleX = y*0.0001;
  151.              });
  152.          }
  153.  
  154.          function rotateX(){
  155.              var cos = Math.cos(angleX);
  156.              var sin = Math.sin(angleX);
  157.              tags.forEach(function(){
  158.                  var y1 = this.y * cos - this.z * sin;
  159.                  var z1 = this.z * cos + this.y * sin;
  160.                  this.y = y1;
  161.                  this.z = z1;
  162.              })
  163.  
  164.          }
  165.  
  166.          function rotateY(){
  167.              var cos = Math.cos(angleY);
  168.              var sin = Math.sin(angleY);
  169.              tags.forEach(function(){
  170.                  var x1 = this.x * cos - this.z * sin;
  171.                  var z1 = this.z * cos + this.x * sin;
  172.                  this.x = x1;
  173.                  this.z = z1;
  174.              })
  175.          }
  176.  
  177.          var tag = function(ele , x , y , z){
  178.              this.ele = ele;
  179.              this.x = x;
  180.              this.y = y;
  181.              this.z = z;
  182.          }
  183.  
  184.          tag.prototype = {
  185.              move:function(){
  186.                  var scale = fallLength/(fallLength-this.z);
  187.                  var alpha = (this.z+RADIUS)/(2*RADIUS);
  188.                  this.ele.style.fontSize = 15 * scale + "px";
  189.                  this.ele.style.opacity = alpha+0.5;
  190.                  this.ele.style.filter = "alpha(opacity = "+(alpha+0.5)*100+")";
  191.                  this.ele.style.zIndex = parseInt(scale*100);
  192.                  this.ele.style.left = this.x + CX - this.ele.offsetWidth/2 +"px";
  193.                  this.ele.style.top = this.y + CY - this.ele.offsetHeight/2 +"px";
  194.              }
  195.          }
  196.          innit();
  197.          animate();
  198.      </script>
  199.  </body>
  200.  </html>

或者直接看github源码：

https://github.com/whxaxes/canvas-test/blob/gh-pages/src/3D-demo/3Dtag.html

解析3D标签云，其实很简单的更多相关文章

  1. css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）

    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...

  2. SP2010 3D标签云Web部分--很酷的效果，强烈推荐！！

    SP2010 3D标签云Web部分--很酷的效果.强烈推荐! ! 项目描述叙事         基于简单Flash的3D标签云Web部件.SP Server 2010使用. 建立在内置标签云Web部件 ...

  3. 纯JS实现的3D标签云，不依赖不论什么第三方库，支持移动页面

    <span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html PUBLIC &q ...

  4. jquery 3D 标签云

    http://www.gbin1.com/technology/jquerynews/20111205tagcloudbyjquery/index.html 相关选项 zoom: 90 初始的缩放度  ...

  5. 3d标签云（JS版）

    http://www.miaov.com/miaov_demo/3dLable/miaov_demo.html http://www.lijian.net/p/windstagball/index.h ...

  6. 3D标签云

    一.圆的坐标表达式 for(var i = 0;i < len;i++){ degree = (2*(k+1)-1)/len - 1;a = Math.acos(degree);//这样取得弧度 ...

  7. vue实现标签云效果

    闲扯两句 最近想给自己的博客上加上一个3D标签云的效果,用来表示自己博客文章的分组,网上找到了canvas实现的,还有a元素实现的解析3D标签云,我想让标签可以选择和点击,又不想在标签数量较多时操作a ...

  8. 3D球状标签云（兼容IE8）

    看见一个很有趣的标签云,3D球状,兼容 IE 8,亲测可用!其他版本没有测试.觉得挺有意思就拿来记录下来,学习学习,本文下方会放出我看的文章地址,先看一下效果: 接下来是代码,html + css + ...

  9. JQCloud: 一个前端生成美化标签云的简单JQuery插件

    本文原文地址:https://jiang-hao.com/articles/2018/blog-JQCloud.html 因为博客需要,发现了一个生成美化简约风格的标签云的JQuery插件. 官网地址 ...

随机推荐

  1. scrapy通过修改配置文件发送状态邮件

    EXTENSIONS = {    'scrapy.extensions.statsmailer.StatsMailer': 500,} STATSMAILER_RCPTS = ['159882826 ...

  2. SHA算法：签名串SHA算法Java语言参考(SHAHelper.java)

    SHAHelper.java package com.util; /** * @author wangxiangyu * @date:2017年10月16日 上午9:00:47 * 类说明:SHA签名 ...

  3. c++ 引用方式传递数组

    值传递 (pass by value),指针传递(pass by pointer),当发生函数调用时,需要给形参分配存储单元.当传递是对象时,要调用拷贝构造函数.而且指针最后析构时,要处理内存释放问题 ...

  4. ajax相关知识点

    AJAX的概念,即“Asynchronous Javascript And XML” 通过在后台(浏览器的后台)与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个 ...

  5. 《java程序设计》结对编程-四则运算整体总结

    需求分析(描述自己对需求的理解,以及后续扩展的可能性) 实现一个命令行程序,要求: 自动生成小学四则运算题目(加,减,乘,除) 支持整数 支持多运算符(比如生成包含100个运算符的题目) 支持真分数 ...

  6. XHR简介

    在XHR诞生前,网页要获取客户端和服务器的任何状态更新,都需要刷新一次,在XHR诞生后就可以完全通过JS代码异步实现这一过程.XHR的诞生也使最初的网页制作转换为开发交互应用,拉开了WEB2.0的序幕 ...

  7. java多线程快速入门（十四）

    使用atomicInteger解决了原子性问题(AtomicInteger保证每次只能一个线程操作count) package com.cppdy; import java.util.concurre ...

  8. collectd+influxDB+Grafana搭建性能监控平台

    网上查看了很多关于环境搭建的文章,都比较久远了很多安装包源都不可用了,今天收集了很多资料组合尝试使用新版本来搭建,故在此记录. 采集数据(collectd)-> 存储数据(influxdb) - ...

  9. pyinstaller将py文件转成exe格式

    首先要注意一下:打包python文件成exe格式这个过程只能在windows环境下运行 1. 直接在命令行用pip安装 pyinstaller pip install pyinstaller 2. 下 ...

  10. 如何获取JMX监控WebSphere所需的com.ibm.ws.admin.client_8.5.0等jar包

    https://blog.csdn.net/weixin_38645718/article/details/83346007