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

最新推荐文章于 2024-07-22 19:42:58 发布

djgreat

最新推荐文章于 2024-07-22 19:42:58 发布

阅读量456

点赞数 1

分类专栏： html5

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

<!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.οnlοad=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.οnmοusemοve=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.οnkeydοwn=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