网页下暴雪

别的不多说~~直接看效果吧~~
实现原理

<code>
<script type='text/javascript' src='http://lib.sinaapp.com/js/jquery/1.4.4/jquery.min.js'></script>
<script type="text/javascript">
(function(){var requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(func){setTimeout(func,17)};var html=document.documentElement;function Snowflake(maxX){this.reset(maxX)}Snowflake.prototype.tick=function(){var sidePhase=this.sidePhase+=this.sideVel;this.y+=this.vel;this.x+=this.sideVel};Snowflake.prototype.reset=function(maxX){var rand=Math.random();var chanceOfLargeSnowflake=0.15;this.size=2+Math.random()*5;this.vel=3+Math.random()*3;this.alpha=0.5+Math.random()*0.8;this.x=Math.random()*maxX;this.y=-this.size;this.sideVel=(0.5-Math.random())*this.vel;return this};(function(){var canvas=document.createElement('canvas');var context=canvas.getContext('2d');var settleCanvas=document.createElement('canvas');var settleContext=context&&settleCanvas.getContext('2d');var canvasStyle=canvas.style;var settleCanvasStyle=settleCanvas.style;var windowResized;var activeFlakes=[];var snowflakesPerPixelPerSecond=0.05;var PIx2=Math.PI*2;var assumedFps=60;var settlePoint;var snowflakePool=[];function resizeCanvas(){settlePoint=Array(html.clientWidth);settleCanvas.width=canvas.width=html.clientWidth;settleCanvas.height=canvas.height=html.clientHeight}function updateSettlePoints(flake){var size=flake.size*0.8;var xStart=Math.floor(flake.x-size);var range=size*2;var newY;if(xStart<0){range+=xStart;xStart=0}if(xStart+range>settlePoint.length){range-=xStart+range-settlePoint.length}for(var i=0;i<range;i++){newY=flake.y-(size*Math.cos((i/range)*Math.PI-(Math.PI/2)));settlePoint[i+xStart]=Math.min(settlePoint[i+xStart]||Infinity,newY)}}var flakesToCreate=0;function frame(){flakesToCreate+=(snowflakesPerPixelPerSecond/assumedFps)*canvas.width;var flakesThisFrame=Math.floor(flakesToCreate);flakesToCreate-=flakesThisFrame;if(windowResized){resizeCanvas();windowResized=false}else{context.clearRect(0,0,canvas.width,canvas.height)}while(flakesThisFrame--){if(snowflakePool.length){activeFlakes.push(snowflakePool.pop().reset(canvas.width))}else{activeFlakes.push(new Snowflake(canvas.width))}}var i=activeFlakes.length;var flake;while(i--){flake=activeFlakes[i];flake.tick();if(flake.y>=canvas.height||flake.y>=settlePoint[Math.floor(flake.x)]){snowflakePool.push.apply(snowflakePool,activeFlakes.splice(i,1));if(flake.alpha>0.8){updateSettlePoints(flake)}settleContext.fillStyle='rgba(255, 255, 255, '+flake.alpha+')';settleContext.beginPath();settleContext.arc(flake.x,flake.y,flake.size,0,PIx2,true);settleContext.closePath();settleContext.fill();continue}context.fillStyle='rgba(255, 255, 255, '+flake.alpha+')';context.beginPath();context.arc(flake.x,flake.y,flake.size,0,PIx2,true);context.closePath();context.fill()}requestAnimationFrame(frame)}if(context){resizeCanvas();canvasStyle.position='fixed';canvasStyle.top=0;canvasStyle.left=0;canvasStyle.zIndex=1138;canvasStyle['pointerEvents']='none';settleCanvasStyle.cssText=canvasStyle.cssText;window.addEventListener('resize',function(){windowResized=true},false);document.body.appendChild(canvas);document.body.appendChild(settleCanvas);requestAnimationFrame(frame)}})()})();
</script>
</code>


0 thoughts on “网页下暴雪
添加一条新回复 回到顶部

亲爱的,主人已经关闭了这篇文章的评论 。