JS1K 演示#

原文：酷壳 – CoolShell · 陈皓 · 2010-08-09 · 12,935 人阅读

以前本站发布过很多和Javascript相关的东西，如：《又一个Javascript试验田》、《一个Windows 3.1的Web网站》、《哥是玩程序的》。今天要介绍另外一组，先看下面的这个Javascript特效（在IE下无法正常工作），你可以用Chrome查看，很炫。不过最炫的是其源码，非常的简单，不超过1K。如果你要知道这个效果的原理，这里有一个教程。这里有个网站：JS1K Demo， 这个站上主要收集一些Javascript不大于1K的程序。

停止演示开始演示

下面是其源码：

[javascript]
f=Math; _=document.body; .style.background="#000"; e=.children[0]; e.width=w=innerWidth-10; e.height=h=innerHeight-25; g=e.getContext("2d"); t=w/h; with(g){scale(w0.5/t,h0.5); translate(1t,1); globalCompositeOperation="lighter"; lw=45/h; $=p=m=q=r=d=0; g=u=-8; setInterval(function(){if(–d< 0){h=f.random; e=h()18-9; r2=h()18-9; u2=h()18-9; d=70}function A(C,B){return C+(B-C)0.04}p=A(p,e); m=A(m,r2); g=A(g,u2); q=A(q,p); r=A(r,m); u=A(u,g); a=f.atan2(q,-u2); b=f.atan2(r2,f.sqrt(uu+qq)); $+=0.05; clearRect(-t,-1,2t,2); for(i=12; i; –i){v=0; for(j=45; j; ){c=f.cos; s=f.sin; j–; w=$-j0.03-i3; A=f.sqrt(j+0.2); n=c(w+s(w0.31))2+s(w0.83)3+w0.02; o=s(w0.7)-c(3+w0.23)3; x=c(n)c(o)A-q; y=s(n)c(o)A-r; z=s(o)A-u; n=c(a); o=s(a); k=xn+zo; h=zn-xo; n=c(b); o=s(b); l=yn+ho; z=hn-yo; lineTo(k/z,l/z); lineWidth=lw(2+!j)/z; h=f.round; w=h(60-j)*(1+!j+f.max(0,s($6-j/8)-0.95)70); strokeStyle="rgb("+h(w(!j+s(i+$0.15)+1))+","+h(!j+w(s(i-1)+1))+","+h(!j+w(s(i-1.3)+1))+")"; if(z> 0.1){v++&&stroke()}else{v=0}beginPath(); moveTo(k/z,l/z)}}},33)}
[/javascript]

下面，让我们再看一个只有1023字节的3D演示，同样，只有在Chrome中才能看到最佳效果。

停止演示开始演示

其源代码如下：

[javascript]
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=-20fc(a5+t);return p(w/2+(Rfc(a)+rfs(z+2t))/z+fc(a)b,h/2+(Rfs(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=2Math.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/2z/2);}var k=(205*(fogMath.abs(fs(i/n23.14+t))))>>0;k=(0.55+0.45*fc((i/n+0.25)Math.PI5));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;}
[/javascript]

你可以前往一看更多的演示。

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

---

转载请注明作者和出处：酷壳 – CoolShell。本文仅供学习，请勿用于商业用途。