使用键盘来改变形状中的线条样式，或移动鼠标来创建一个新的形状

来源：互联网发布：月供算法编辑：程序博客网时间：2024/05/21 22:51

使用键盘来改变形状中的线条样式，或移动鼠标来创建一个新的形状。

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><title>JS1k: Breathing Galaxies (1020 bytes)</title><script type="text/javascript">window.onload=function(){C=Math.cos;S=Math.sin;U=0;w=window;j=document;d=j.getElementById("c");c=d.getContext("2d");W=d.width=w.innerWidth;H=d.height=w.innerHeight;c.fillRect(0,0,W,H);c.globalCompositeOperation="lighter";c.lineWidth=0.2;c.lineCap="round";var bool=0,t=0;d.onmousemove=function(e){if(window.T){if(D==9){D=Math.random()*15;f(1);}clearTimeout(T);}X=e.pageX;Y=e.pageY;a=0;b=0;A=X,B=Y;R=(e.pageX/W*999>>0)/999;r=(e.pageY/H*999>>0)/999;U=e.pageX/H*360>>0;D=9;g=360*Math.PI/180;T=setInterval(f=function(e){c.save();c.globalCompositeOperation="source-over";if(e!=1){c.fillStyle="rgba(0,0,0,0.02)";c.fillRect(0,0,W,H);}c.restore();i=25;while(i--){c.beginPath();if(D>450||bool){if(!bool){bool=1;}if(D<0.1){bool=0;}t-=g;D-=0.1;}if(!bool){t+=g;D+=0.1;}q=(R/r-1)*t;x=(R-r)*C(t)+D*C(q)+(A+(X-A)*(i/25))+(r-R);y=(R-r)*S(t)-D*S(q)+(B+(Y-B)*(i/25));if(a){c.moveTo(a,b);c.lineTo(x,y)}c.strokeStyle="hsla("+(U%360)+",100%,50%,0.75)";c.stroke();a=x;b=y;}U-=0.5;A=X;B=Y;},16);}j.onkeydown=function(e){a=b=0;R+=0.05}d.onmousemove({pageX:300,pageY:290})}</script><style>body{margin:0;overflow:hidden}div{padding:1px 5px;background:#333;position:absolute;z-index:2;color:#555;font-family:arial}a{color:#ccf}a:hover{color:red}</style><script type="text/javascript">var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-400768-7']);_gaq.push(['_trackPageview']);(function(){var ga=document.createElement('script');ga.type='text/javascript';ga.async=true;ga.src=('https:'==document.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s);})();</script></head><body><div><a href="http://mudcu.be/">mudcu.be</a> › <a href="http://mudcu.be/journal/">journal</a> › <a href="http://mudcube7.blogspot.com/2010/08/what-can-1kb-of-javascript-do.html">JS1k: What can 1kb of Javascript do?</a></div><div id="text"></div><canvas id="c"></canvas></body></html>

查看：http://mudcu.be/labs/JS1k/BreathingGalaxies.html

0 0