利用HTML5绘制点线面组成的3D图形的示例_html5教程技巧_HTML/Xhtml_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • HTML/Xhtml

    当前位置:主页 > 网页制作 > HTML/Xhtml >

    利用HTML5绘制点线面组成的3D图形的示例_html5教程技巧

    时间:2019-08-13|栏目:HTML/Xhtml|点击:
  • 这篇文章主要介绍了利用HTML5绘制点线面组成的3D图形的示例,主要还是利用了HTML5中的Canvas API,需要的朋友可以参考下

    玩Canvas玩了有两三个礼拜了,平面的东西玩来玩去也就那样,所以就开始折腾3D了。

      因为Canvas画布终究还是平面的,所以要有3D就得抽象出一个Z轴。然后再把3D坐标转换成2D坐标,画到画布上,再通过旋转等变换效果来产生3D感。做3D一般就是由点到线,然后由线到面。

      【点】

      点的话,之前我有写过关于3D的博文 解析3D标签云,其实很简单 ,这篇博文虽然讲的是用div实现的3D标签云,但是追根到底产生的3D原理是一样的,就是最简单的由点构成的3D了。每一个标签就是一个点。也可以直接看这个DEMO:
    2015512164236104.png (344×329)

    3DBall
    里面的总共有五百个点对象,每个点对象相应的根据他们的Z轴来改变他们的大小和透明度,再平均分布在球面上,就构成了点球体了。

      【线】

      如果知道怎么做点之后,线也就容易了,只要把点连起来就行了。这个没做DEMO,不过也确实不难。就循环moveTo,然后lineTo,线就出来了。

      【面】

      这篇博文主要讲面滴。
    二话不说,先上个DEMO吧 :
    2015512164305697.png (170×168)

    3D立方体

    做一个立方体,我用了三个对象:点对象,面对象,以及立方体本身一个对象:

      下面这个是点对象,x,y,z是点的三维坐标,_get2d方法是把三维坐标转换到二维层面来。fallLength是焦距。

    XML/HTML Code复制内容到剪贴板
    1. var Vector = function(x,y,z){   
    2.             this.x = x;   
    3.             this.y = y;   
    4.             this.z = z;   
    5.             this._get2d = function(){   
    6.                 var scale = fallLength/(fallLength+this.z);   
    7.                 var x = centerX + this.x*scale;   
    8.                 var y = centerY + this.y*scale;   
    9.                 return {x:x , y:y};   
    10.             }   
    11.         }  


      然后是面对象:

      面对象的属性页很容易理解,一个面就是一个正方形 , v1v2v3v4是面的四个顶点,zIndex这个属性很重要,是代表这个面的层级,是在最外面还是在里面,这个必须要有,这样当用canvas画的时候才能让这个面画在最前面,才不会被其他的面遮盖。zIndex的值也很容易理解,就是顶点z轴坐标的平均值,其实也就是中心点的z轴坐标。颜色就是这个面的颜色啦。

    XML/HTML Code复制内容到剪贴板
    1. var Face = function(vector1,vector2,vector3,vector4,color){   
    2.             this.v1 = vector1;   
    3.             this.v2 = vector2;   
    4.             this.v3 = vector3;   
    5.             this.v4 = vector4;   
    6.             this.color = color;   
    7.             this.zIndex = (this.v1.z + this.v2.z + this.v3.z + this.v4.z)/4;   
    8.             this.draw = function(){   
    9.                 ctx.save();   
    10.                 ctx.beginPath();   
    11.                 ctx.moveTo(this.v1._get2d().x , this.v1._get2d().y);   
    12.                 ctx.lineTo(this.v2._get2d().x , this.v2._get2d().y);   
    13.                 ctx.lineTo(this.v3._get2d().x , this.v3._get2d().y);   
    14.                 ctx.lineTo(this.v4._get2d().x , this.v4._get2d().y);   
    15.                 ctx.closePath();   
    16.                 // ctx.fillStyle = "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",0.2)";   
    17.                 ctx.fillStyle = this.color;   
    18.                 ctx.fill();   
    19.             }   
    20.         }  


      最后是立方体本身对象:

    上一篇:标记语言——短语元素

    栏    目:HTML/Xhtml

    下一篇:用HTML5制作一个简单的桌球游戏的教程_html5教程技巧

    本文标题:利用HTML5绘制点线面组成的3D图形的示例_html5教程技巧

    本文地址:http://www.jh-floor.com/wangyezhizuo/HTML_Xhtml/20198.html

    您可能感兴趣的文章

    广告投放 | 联系我们 | 版权申明

    重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

    如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

    联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

    Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号