设为首页收藏本站
切换到宽版

PHPIN.NET

 找回密码
 立即注册
PHPIN.NET»论坛 › 网页前端技术 › 网页综合特效 › canvas之钻石
返回列表 发新帖
查看: 5826|回复: 0

[HTML5/CSS3] canvas之钻石

[复制链接]
admin

469

主题

31

回帖

5569

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5569
发表于 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;

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

  36.        cvs.width=W;
  37.        cvs.height=H;
  38.        g.strokeStyle="#FFF";

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

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

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

  62.    for(i=0,angle=Math.PI*2/len1;i<len1;i++)
  63.    {
  64.      arr[idx++]=Math.cos(angle*i)*radius;
  65.      arr[idx++]=Math.sin(angle*i)*radius;
  66.      arr[idx++]=radius*(0.187-(i&1)*0.025);
  67.    }

  69.    for(i=0,radius1=radius*0.25,angle=Math.PI*2/len;i<len;i++)
  70.    {
  71.      arr[idx++]=Math.cos(angle*i)*radius1;
  72.      arr[idx++]=Math.sin(angle*i)*radius1;
  73.      arr[idx++]=radius*0.8;
  74.    }
  75.    arr[idx++]=0;
  76.    arr[idx++]=0;
  77.    arr[idx++]=radius;

  79.    function rotate(angleX,angleY)
  80.   {
  81.      var cX=Math.cos(angleX),
  82.          sX=Math.sin(angleX),
  83.          cY=Math.cos(angleY),
  84.          sY=Math.sin(angleY),
  85.          x1,y1,z1,
  86.          i=0,len=arr.length;
  87.      for(;i<len;i+=3)
  88.      {
  89.          x1=cY*arr[i]-sY*arr[i+2],
  90.          z1=cY*arr[i+2]+sY*arr[i],
  91.          y1=cX*arr[i+1]-sX*z1;
  92.          z1=cX*z1+sX*arr[i+1];

  94.          arr[i]=x1;
  95.          arr[i+1]=y1;
  96.          arr[i+2]=z1;
  97.      }
  98.   }

  100.   function setPerspective(){
  101.     for(var i=0,scale,len=arr.length;i<len;i+=3)
  102.     {
  103.       scale=fl/(fl+arr[i+2]);
  104.       move[i]=arr[i]*scale;
  105.       move[i+1]=arr[i+1]*scale;
  106.     }
  107.   }

  109.   function draw(arr){
  110.      var idx=0,st=len*3*2+len1*3*2;
  111.      g.clearRect(0,0,W,H);
  112.      g.save();
  113.      g.translate(cx,cy);
  114.      g.beginPath();
  115.      g.moveTo(arr[idx++],arr[idx++]);
  116.      idx++;
  117.      for(i=1;i<len;i++)
  118.      {
  119.        g.lineTo(arr[idx++],arr[idx++]);
  120.        idx++;
  121.      }
  122.      g.closePath();
  123.      g.stroke();

  125.      g.beginPath();
  126.      g.moveTo(arr[0],arr[1]);
  127.      for(i=0;i<len-1;i++)
  128.      {
  129.        g.lineTo(arr[idx++],arr[idx++]);
  130.        g.lineTo(arr[idx-len*3+1],arr[idx-len*3+2]);
  131.        idx++;
  132.      }
  133.      g.lineTo(arr[idx++],arr[idx++]);
  134.      idx++;
  135.      g.closePath();
  136.      g.stroke();

  138.      g.beginPath();
  139.      g.moveTo(arr[idx++],arr[idx++]);
  140.      idx++;
  141.      for(i=1;i<len1;i++)
  142.      {
  143.        g.lineTo(arr[idx++],arr[idx++]);
  144.        idx++;
  145.      }
  146.      g.closePath();
  147.      g.stroke();
  148.      
  149.      idx-=len1*3;
  150.      g.beginPath();
  151.      g.moveTo(arr[idx-3],arr[idx-2]);
  152.      g.lineTo(arr[idx],arr[idx+1]);
  153.      for(i=0;i<len1;i++)
  154.      {
  155.        if(i&1)
  156.        {
  157.          idx+=3;
  158.        }
  159.        else
  160.        {
  161.          if(i%4)
  162.          {
  163.            g.moveTo(arr[idx++],arr[idx++]);
  164.          }
  165.          else
  166.          {
  167.            g.moveTo(arr[len*3+((i-1)/4|0)*3],arr[len*3+((i-1)/4|0)*3+1]);
  168.            g.lineTo(arr[idx++],arr[idx++]);
  169.          }
  170.          g.lineTo(arr[len*3+(i/4|0)*3],arr[len*3+(i/4|0)*3+1]);
  171.          idx++;
  172.       }
  173.      }
  174.      g.stroke();

  176.      g.beginPath();
  177.      g.moveTo(arr[idx++],arr[idx++]);
  178.      idx++;
  179.      for(i=1;i<len1;i++)
  180.      {
  181.        g.lineTo(arr[idx++],arr[idx++]);
  182.        idx++;
  183.      }
  184.      g.closePath();
  185.      g.stroke();

  187.      idx-=len1*3;
  188.      g.beginPath();
  189.      g.moveTo(arr[st-6],arr[st-5]);
  190.      g.lineTo(arr[st],arr[st+1]);
  191.      for(i=0;i<len1;i++)
  192.      {
  193.        if(i&1)
  194.        {
  195.          idx+=3;
  196.        }
  197.        else
  198.        {
  199.          
  200.          if(i%4)
  201.          {
  202.            g.moveTo(arr[st++],arr[st++]);
  203.            g.lineTo(arr[idx++],arr[idx++]);     
  204.            st===total-4||g.lineTo(arr[++st],arr[st+1]);      
  205.          }
  206.          else
  207.          {
  208.            g.moveTo(arr[idx++],arr[idx++]);         
  209.            g.lineTo(arr[total-3],arr[total-2]);
  210.          }
  211.          idx++;
  212.        }
  213.      }
  214.      g.stroke();
  215.    
  216.      g.restore();
  217.   }
  218. console.log(typeof cvs.onmousemove==="undefined"?"touchstart":"mousemove");
  219.   cvs.addEventListener(typeof cvs.onmousemove==="undefined"?"touchstart":"mousemove",function(e){
  220.         var crd=document.body.getBoundingClientRect();
  221.         e.type=="touchstart"&&(e=e.touches[0]);        
  222.         angleY=e.clientX-crd.left-cx>0?0.005:-0.005;
  223.         angleX=e.clientY-crd.top-cy>0?0.005:-0.005;
  224.   },false);

  226.    rotate(-1.62,angleY);
  227.   (function drawFrame(){
  228.     rotate(angleX,angleY);
  229.     setPerspective();
  230.     draw(move);
  231.     run(drawFrame);
  232.   })();
  233. }
  234. diamond(W/2,H/2,Math.max(120,Math.min(W,H)/4),document.querySelector("canvas"));
  235. //]]>
  236.   </script>
  237. </body>
  238. </html>
复制代码


canvas, HTML5

相关帖子
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-11-21 20:40

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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