Chinaunix首页 | 论坛 | 博客
  • 博客访问: 416394
  • 博文数量: 68
  • 博客积分: 2010
  • 博客等级: 大尉
  • 技术积分: 671
  • 用 户 组: 普通用户
  • 注册时间: 2008-08-11 13:36
文章分类

全部博文(68)

文章存档

2010年(14)

2009年(7)

2008年(47)

我的朋友

分类: 系统运维

2010-08-12 10:22:43

今天看到一些非常酷的JS代码, 短小精悍, 效果出众! 不过运行起来资源占用都有些高(老点的机器可能吃不消)...
虽然还不太懂JS的东西, 不过最近有看过一些教程, 还蛮想学点这方面的内容.

先贴一个演示(本演示段代码改自 ):
Note: 推荐使用Chrome(Chrome的效果是最流畅的)或者Firefox打开, IE可能看不到效果 :)





源代码如下:

with(document.body.style)
{
    margin="0px";
    overflow="hidden";
}
var w=window.innerWidth;
var h=window.innerHeight;
var ca=document.getElementById("c");
ca.width=w;
ca.height=h;
var c=ca.getContext("2d");
m=Math;
fs=m.sin;
fc=m.cos;
fm=m.max;
setInterval(d,30);
function p(x,y,z)
{
    return{x:x,y:y,z:z};
}
function s(a,z)
{
    r=w/10;
    R=w/3;
    b=-20*fc(a*5+t);
    return p(w/2+(R*fc(a)+r*fs(z+2*t))/z+fc(a)*b,h/2+(R*fs(a))/z+fs(a)*b);
}
function q(a,da,z,dz)
{
    var v=[s(a,z),s(a+da,z),s(a+da,z+dz),s(a,z+dz)];
    c.beginPath();
    c.moveTo(v[0].x,v[0].y);
    for(i in v)
        c.lineTo(v[i].x,v[i].y);
    c.fill();
}
var Z=-0.20;
var t=0;
function d()
{
    t+=1/30.0;
    c.fillStyle="#000";
    c.fillRect(0,0,w,h);
    c.fillStyle="#f00";
    var n=30;
    var a=0;
    var da=2*Math.PI/n;
    var dz=0.25;
    for(var z=Z+8;z>Z;z-=dz)
    {
        for(var i=0;i<n;i++)
        {
            fog=1/(fm((z+0.7)-3,1));
            if(z<=2)
            {
                fog=fm(0,z/2*z/2);
            }
            var k=(205*(fog*Math.abs(fs(i/n*2*3.14+t))))>>0;
            k*=(0.55+0.45*fc((i/n+0.25)*Math.PI*5));
            k=k>>0;
            c.fillStyle="rgb("+k+","+k+","+k+")";
            q(a,da,z,dz);
            if(i%3==0)
            {
                c.fillStyle="#000";
                q(a,da/10,z,dz);
            }
            a+=da;
        }
    }
    Z-=0.05;
    if(Z<=dz)
        Z+=dz;
}






第一次看到这样的代码效果, 感觉很震撼(这是程序实现的!!!), 先记下来, 有空要好好研究一下...
更多演示及代码请参见这里: 

阅读(4234) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~