设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 672|回复: 0

[HTML5/CSS3] canvas之钻石

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2015-6-14 15:19:34 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
演示截图.png
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8" />
  5.   <meta name="Keywords" content="" />
  6.   <meta name="Description" content="" />
  7.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  8.   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes,minimal-ui" />
  9.   <meta name="apple-mobile-web-app-capable" content="yes" />
  10.   <title>canvas之钻石</title>
  11.   <style>
  12.     html,body{margin:0;padding:0;height:100%;overflow:hidden;background-color:#000;}
  13.   </style>
  14. </head>
  15. <body>
  16.   <canvas></canvas>
  17.   <script>
  18.   //<![CDATA[
  19.   "use strict";
  20. var run=window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(cb){return setTimeout(cb,16.6)},
  21.    W=window.innerWidth,
  22.    H=window.innerHeight;

  23.   function diamond(cx,cy,radius,cvs)
  24.   {
  25.       var Vector3d=typeof Float32Array==="function"?Float32Array:Array,
  26.        len=8,len1=32,total=len*3*3+len1*3*2+3,
  27.        fl=radius*2.5,
  28.        g=cvs.getContext("2d"),
  29.        idx=0,
  30.        arr=new Vector3d(total),
  31.        move=new Vector3d(total),
  32.        i=0,radius1,startAngle,angle,
  33.        angleX=0,angleY=0.005;

  34.        cvs.width=W;
  35.        cvs.height=H;
  36.        g.strokeStyle="#FFF";

  37.    for(radius1=radius*0.58,angle=Math.PI*2/len;i<len;i++)
  38.    {
  39.      arr[idx++]=Math.cos(angle*i)*radius1;
  40.      arr[idx++]=Math.sin(angle*i)*radius1;
  41.      arr[idx++]=-radius*0.175;
  42.    }

  43.    for(i=0,radius1=radius*0.8,angle=Math.PI*2/len,startAngle=angle/2;i<len;i++)
  44.    {
  45.      arr[idx++]=Math.cos(angle*i+startAngle)*radius1;
  46.      arr[idx++]=Math.sin(angle*i+startAngle)*radius1;
  47.      arr[idx++]=-radius*0.08;
  48.    }

  49.    
  50.    for(i=0,angle=Math.PI*2/len1;i<len1;i++)
  51.    {
  52.      arr[idx++]=Math.cos(angle*i)*radius;
  53.      arr[idx++]=Math.sin(angle*i)*radius;
  54.      arr[idx++]=radius*(0.162+(i&1)*0.025);
  55.    }

  56.    for(i=0,angle=Math.PI*2/len1;i<len1;i++)
  57.    {
  58.      arr[idx++]=Math.cos(angle*i)*radius;
  59.      arr[idx++]=Math.sin(angle*i)*radius;
  60.      arr[idx++]=radius*(0.187-(i&1)*0.025);
  61.    }

  62.    for(i=0,radius1=radius*0.25,angle=Math.PI*2/len;i<len;i++)
  63.    {
  64.      arr[idx++]=Math.cos(angle*i)*radius1;
  65.      arr[idx++]=Math.sin(angle*i)*radius1;
  66.      arr[idx++]=radius*0.8;
  67.    }
  68.    arr[idx++]=0;
  69.    arr[idx++]=0;
  70.    arr[idx++]=radius;

  71.    function rotate(angleX,angleY)
  72.   {
  73.      var cX=Math.cos(angleX),
  74.          sX=Math.sin(angleX),
  75.          cY=Math.cos(angleY),
  76.          sY=Math.sin(angleY),
  77.          x1,y1,z1,
  78.          i=0,len=arr.length;
  79.      for(;i<len;i+=3)
  80.      {
  81.          x1=cY*arr[i]-sY*arr[i+2],
  82.          z1=cY*arr[i+2]+sY*arr[i],
  83.          y1=cX*arr[i+1]-sX*z1;
  84.          z1=cX*z1+sX*arr[i+1];

  85.          arr[i]=x1;
  86.          arr[i+1]=y1;
  87.          arr[i+2]=z1;
  88.      }
  89.   }

  90.   function setPerspective(){
  91.     for(var i=0,scale,len=arr.length;i<len;i+=3)
  92.     {
  93.       scale=fl/(fl+arr[i+2]);
  94.       move[i]=arr[i]*scale;
  95.       move[i+1]=arr[i+1]*scale;
  96.     }
  97.   }

  98.   function draw(arr){
  99.      var idx=0,st=len*3*2+len1*3*2;
  100.      g.clearRect(0,0,W,H);
  101.      g.save();
  102.      g.translate(cx,cy);
  103.      g.beginPath();
  104.      g.moveTo(arr[idx++],arr[idx++]);
  105.      idx++;
  106.      for(i=1;i<len;i++)
  107.      {
  108.        g.lineTo(arr[idx++],arr[idx++]);
  109.        idx++;
  110.      }
  111.      g.closePath();
  112.      g.stroke();

  113.      g.beginPath();
  114.      g.moveTo(arr[0],arr[1]);
  115.      for(i=0;i<len-1;i++)
  116.      {
  117.        g.lineTo(arr[idx++],arr[idx++]);
  118.        g.lineTo(arr[idx-len*3+1],arr[idx-len*3+2]);
  119.        idx++;
  120.      }
  121.      g.lineTo(arr[idx++],arr[idx++]);
  122.      idx++;
  123.      g.closePath();
  124.      g.stroke();

  125.      g.beginPath();
  126.      g.moveTo(arr[idx++],arr[idx++]);
  127.      idx++;
  128.      for(i=1;i<len1;i++)
  129.      {
  130.        g.lineTo(arr[idx++],arr[idx++]);
  131.        idx++;
  132.      }
  133.      g.closePath();
  134.      g.stroke();
  135.      
  136.      idx-=len1*3;
  137.      g.beginPath();
  138.      g.moveTo(arr[idx-3],arr[idx-2]);
  139.      g.lineTo(arr[idx],arr[idx+1]);
  140.      for(i=0;i<len1;i++)
  141.      {
  142.        if(i&1)
  143.        {
  144.          idx+=3;
  145.        }
  146.        else
  147.        {
  148.          if(i%4)
  149.          {
  150.            g.moveTo(arr[idx++],arr[idx++]);
  151.          }
  152.          else
  153.          {
  154.            g.moveTo(arr[len*3+((i-1)/4|0)*3],arr[len*3+((i-1)/4|0)*3+1]);
  155.            g.lineTo(arr[idx++],arr[idx++]);
  156.          }
  157.          g.lineTo(arr[len*3+(i/4|0)*3],arr[len*3+(i/4|0)*3+1]);
  158.          idx++;
  159.       }
  160.      }
  161.      g.stroke();

  162.      g.beginPath();
  163.      g.moveTo(arr[idx++],arr[idx++]);
  164.      idx++;
  165.      for(i=1;i<len1;i++)
  166.      {
  167.        g.lineTo(arr[idx++],arr[idx++]);
  168.        idx++;
  169.      }
  170.      g.closePath();
  171.      g.stroke();

  172.      idx-=len1*3;
  173.      g.beginPath();
  174.      g.moveTo(arr[st-6],arr[st-5]);
  175.      g.lineTo(arr[st],arr[st+1]);
  176.      for(i=0;i<len1;i++)
  177.      {
  178.        if(i&1)
  179.        {
  180.          idx+=3;
  181.        }
  182.        else
  183.        {
  184.          
  185.          if(i%4)
  186.          {
  187.            g.moveTo(arr[st++],arr[st++]);
  188.            g.lineTo(arr[idx++],arr[idx++]);     
  189.            st===total-4||g.lineTo(arr[++st],arr[st+1]);      
  190.          }
  191.          else
  192.          {
  193.            g.moveTo(arr[idx++],arr[idx++]);         
  194.            g.lineTo(arr[total-3],arr[total-2]);
  195.          }
  196.          idx++;
  197.        }
  198.      }
  199.      g.stroke();
  200.    
  201.      g.restore();
  202.   }
  203. console.log(typeof cvs.onmousemove==="undefined"?"touchstart":"mousemove");
  204.   cvs.addEventListener(typeof cvs.onmousemove==="undefined"?"touchstart":"mousemove",function(e){
  205.         var crd=document.body.getBoundingClientRect();
  206.         e.type=="touchstart"&&(e=e.touches[0]);        
  207.         angleY=e.clientX-crd.left-cx>0?0.005:-0.005;
  208.         angleX=e.clientY-crd.top-cy>0?0.005:-0.005;
  209.   },false);

  210.    rotate(-1.62,angleY);
  211.   (function drawFrame(){
  212.     rotate(angleX,angleY);
  213.     setPerspective();
  214.     draw(move);
  215.     run(drawFrame);
  216.   })();
  217. }
  218. diamond(W/2,H/2,Math.max(120,Math.min(W,H)/4),document.querySelector("canvas"));
  219. //]]>
  220.   </script>
  221. </body>
  222. </html>
复制代码


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-3 23:34

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表