JS实现雪花效果

浏览数：42 / 时间：2015年06月09日

演示效果

http://www.9696e.com/demo/snow/

春节之前新一博客也会一直挂着的。

加载链接

<script src="http://www.9696e.com/demo/snow/snow.js" type="text/javascript"></script>

源码奉上

(function(){var t,e,n,a,o,i,r=[],s=[],u=0;requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(e){var n=(new Date).getTime();var a=Math.max(0,16-(n-u));t=setTimeout(function(){e(n+a)},a);u=n+a};cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame||window.webkitCancelAnimationFrame||window.msCancelAnimationFrame||window.oCancelAnimationFrame||function(){clearTimeout(t)};function l(){if(!(this instanceof l)){throw new Error("please use new() create instance");return}if(m.call(this)==false){return}this.status=0;this.start()}function m(){var t=document.createElement("canvas");this.canvas=t;var e=document.createElement("x");e.style.cssText="pointer-events:auto";return!!(t.getContext&&t.getContext("2d")&&e.style.pointerEvents==="auto")}l.prototype.start=function(){var t=this;if(this.status===1){return false}this.status=1;this.snowCanvas();this.createFlakes();requestAnimationFrame(c)};l.prototype.stop=function(){if(this.status===2)return;this.status=2;cancelAnimationFrame()};l.prototype.snowCanvas=function(){var t=this.canvas;e=window.innerWidth;n=window.innerHeight;t.id="J_snowfall";t.width=e;t.height=n;t.setAttribute("style","position: fixed; top: 0; left: 0; z-index: 9000; pointer-events: none;");document.body.appendChild(t);o=t;i=t.getContext("2d");i.strokeStyle="none";window.onresize=function(){e=window.innerWidth;n=window.innerHeight;t.width=e;t.height=n;flakeCount=e*n/6e3;h.createFlakes()}};l.prototype.createFlakes=function(){var t,n,o,r,u="#FFF",l=[.45,.55,.8,.9,1];r=[40,50,60,80,100];for(var m=0;m<5;m++){t=document.createElement("canvas");t.width=r[m];t.height=r[m];n=t.getContext("2d");n.font=r[m]/2+"px sumson";o=n.createRadialGradient(r[m]/2,r[m]/2,0,r[m]/2,r[m]/2,r[m]/2);o.addColorStop(0,u);o.addColorStop(.1,u);o.addColorStop(.85,f(u,l[m]));o.addColorStop(1,f(u,0));n.fillStyle=o;n.fillText("*",r[m]/2,r[m]/2);s.push(t)}a=i.createLinearGradient(0,0,0,e);d()};function d(){var t;var a=(e-940)/2;flakeCount=e*n/6e3;for(var o=0;o<flakeCount;o++){t=o<flakeCount*.6?0:o<flakeCount*.8?1:o<flakeCount*.9?2:o<flakeCount*.98?3:4;var i=Math.floor(Math.random()*10)>=5?a+940:a;var s=i<940?Math.random()*i:940+a+Math.random()*a;r[o]=[s,Math.random()*n,t]}}function c(t){i.fillStyle=a,i.clearRect(0,0,e,n),i.beginPath();for(var o=0;o<flakeCount;o++){var u=r[o][0];var l=r[o][1];var m=s[r[o][2]];i.drawImage(m,u,l)}i.fill();w();requestAnimationFrame(c)}function f(t,e){var n,a,o;t=t.replace(/^s*#|s*$/g,"");t.length===3&&(t=t.replace(/([0-9a-fA-F])/g,"$1$1"));n=parseInt(t.substr(0,2),16);a=parseInt(t.substr(2,2),16);o=parseInt(t.substr(4,2),16);return"rgba("+n+", "+a+", "+o+", "+e+")"}function w(){var t,a,o,i,s,u,l;p=.01;a=Math.sin(p);l=(e-940)/2;for(var m=0;m<flakeCount;m++){u=r[m];o=Math.sin(4*p+m);u[1]+=(u[2]/2+(2+o))/2;u[0]+=6*(a+o/2)/(10/u[2]);s=Math.floor(Math.random()*10)>=5?l+940:l;i=s<940?Math.random()*s:940+l+Math.random()*l;u[1]>n&&(u[1]=-20,u[0]=i);if(u[0]>l&&u[0]<940+l||u[0]>e||u[0]<-20){u[0]>e?u[0]=-20:u[0]=e-20}r[m]=u}}var h=new l})();