【第21期】观点:人工智能到底用 GPU?还是用 FPGA?

HTML5-特效

转载 2013年12月05日 17:03:42
HTML5-特效-跟随鼠标的粒子

<!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8> <title>Liquid Particles - spielzeugz.de canvas experiment </title> <meta name="description" content="HTML5/canvas demo, 500 particles to play around with." /> <meta name="keywords" content="html5,canvas,javascript,particles,interactive,velocity,programming,flash" /> <script type="text/javascript"> (function(){function C(){e.globalCompositeOperation="source-over";e.fillStyle="rgba(8,8,12,0.65)";e.fillRect(0,0,f,p);e.globalCompositeOperation="lighter";x=q-u;y=r-v;u=q;v=r;for(var d=0.86*f,l=0.125*f,m=0.5*f,t=Math.random,n=Math.abs,o=z;o--;){var h=A[o],i=h.x,j=h.y,a=h.a,b=h.b,c=i-q,k=j-r,g=Math.sqrt(c*c+k*k)||0.001,c=c/g,k=k/g;if(w&&g<m)var s=14*(1-g/m),a=a+(c*s+0.5-t()),b=b+(k*s+0.5-t());g<d&&(s=0.0014*(1-g/d)*f,a-=c*s,b-=k*s);g<l&&(c=2.6E-4*(1-g/l)*f,a+=x*c,b+=y*c);a*=B;b*=B;c=n(a);k=n(b);g= 0.5*(c+k);0.1>c&&(a*=3*t());0.1>k&&(b*=3*t());c=0.45*g;c=Math.max(Math.min(c,3.5),0.4);i+=a;j+=b;i>f?(i=f,a*=-1):0>i&&(i=0,a*=-1);j>p?(j=p,b*=-1):0>j&&(j=0,b*=-1);h.a=a;h.b=b;h.x=i;h.y=j;e.fillStyle=h.color;e.beginPath();e.arc(i,j,c,0,D,!0);e.closePath();e.fill()}}function E(d){d=d?d:window.event;q=d.clientX-m.offsetLeft-n.offsetLeft;r=d.clientY-m.offsetTop-n.offsetTop}function F(){w=!0;return!1}function G(){return w=!1}function H(){this.color="rgb("+Math.floor(255*Math.random())+","+Math.floor(255* Math.random())+","+Math.floor(255*Math.random())+")";this.b=this.a=this.x=this.y=0;this.size=1}var D=2*Math.PI,f=1E3,p=560,z=600,B=0.96,A=[],o,e,n,m,q,r,x,y,u,v,w;window.onload=function(){o=document.getElementById("mainCanvas");if(o.getContext){m=document.getElementById("outer");n=document.getElementById("canvasContainer");e=o.getContext("2d");for(var d=z;d--;){var l=new H;l.x=0.5*f;l.y=0.5*p;l.a=34*Math.cos(d)*Math.random();l.b=34*Math.sin(d)*Math.random();A[d]=l}q=u=0.5*f;r=v=0.5*p;document.onmousedown= F;document.onmouseup=G;document.onmousemove=E;setInterval(C,33);document.getElementById("output").innerHTML='interact with the mouse, occasionally click or hold down the mousebutton<br>More here: <a href="http://www.spielzeugz.de/lab">spielzeugz.de/lab</a> &nbsp; | &nbsp; Follow us on <a href="http://www.twitter.com/spielzeugz" target="_blank">Twitter</a> or <a href="http://plus.google.com/116743952899287181520" target="_blank">Google+</a>'}else document.getElementById("output").innerHTML="Sorry, needs a recent version of Chrome, Firefox, Opera, Safari, or Internet Explorer 9."}})(); </script> <link rel="stylesheet" type="text/css" href="experiment-pages.css" /> </head> <body> <div id="outer"> <div id="canvasContainer"> <canvas id="mainCanvas" width="1000" height="560"></canvas> <div id="output"></div> </div> </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-11054609-1"); pageTracker._trackPageview(); } catch(err) {} </script> </body> </html>


举报

相关文章推荐

7款让人惊叹的HTML5粒子动画特效

7款让人惊叹的HTML5粒子动画特效 HTML5的很大一个优势就是可以更加便捷高效地制作网页粒子动画特效,特别是Canvas特性,可以实现在网页上绘制任何图形和动画。本文要分享7款让人惊...

HTML5炫酷的特效代码下载

HTML5炫酷的特效代码下载 源代码下载地址http://www.zuidaima.com/share/1800857292508160.htm

30个酷毙的交互式网站(HTML5+CSS3)

HTML5,CSS3,还有Javascript 让很多绚丽的设计效果得以展示。现在的网页设计是可以很有交互性的,已经不再被静态布局给限制住了。下面列出的这30个网站就是个很不错的证明,它通过诸如音频和...
  • wowkk
  • wowkk
  • 2013-10-11 00:05
  • 118179

HTML5 Canvas火焰闪烁动画 火焰跟随鼠标

该款动画是基于Canvas,火焰上下窜动的效果非常逼真,而且火焰可以跟随鼠标移动,是一款非常酷炫的HTML5 Canvas动画。

8款HTML5动画特效推荐源码

1、HTML5 Canvas发光Loading动画 之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载...

8款炫酷的HTML5特效源码

HTML5的强大不仅在于可以让网页元素更加灵活多变,更在于它可以很方便的实现网页动画的特效,可以让你的网站更加富有现代化特色。今天,就给大家分享8个让人难忘的HTML5炫酷动画~    ...

[Html5 canvas]鼠标悬停吸附粒子背景特效

之前在某不知名网站上看到过,觉得好酷炫,当时也没多想怎么写的。demo地址: http://www.luoyuhu.com/ github地址:https://github.com/hustcc/c...

文字 11种HTML5和CSS3炫酷文字样式和鼠标滑过特效

这是一款效果非常炫酷的HTML5和CSS3文字样式和鼠标滑过特效插件。该文字特效中包含了11种不同的文字样式和鼠标滑过文字时的动画效果。部分文字动画效果使用了SVG和HTML5 Canvas来制作。注...

css3 html5动画特效

转载自:http://www.html5tricks.com/8-html5-pure-css3-animation.html 8个超震撼的HTML5和纯CSS3动画源码 15...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)