★HTML5 Canvas黑夜雪花飘落特效(随机位置/随机数量)★

一款HTML5 Canvas雪花特效，运行网页后可看到动态效果的雪花飘飘落下，随机位置，随机数量，速度可调节。转自源码爱好者
<canvas id="mc" width="420" height="280" style="border:1px solid black"></canvas> <script type="text/javascript"> function createFlower(context,n,dx,dy,size,length){ context.beginPath(); context.moveTo(dx,dy+size); var dig = 2*Math.PI/n; for(var i=1;i<n+1;i++){ var ctrlX = Math.sin((i-0.5)*dig)*length+dx; var ctrlY = Math.cos((i-0.5)*dig)*length+dy; var x = Math.sin(i*dig)*size+dx; var y = Math.cos(i*dig)*size+dy; context.quadraticCurveTo(ctrlX,ctrlY,x,y); } context.closePath(); } snowPos = [ {x:50,y:44,z:5},{x:140,y:35,z:3}, {x:360,y:20,z:1},{x:250,y:50,z:2}, {x:110,y:90,z:4},{x:310,y:85,z:2}, {x:65,y:160,z:5},{x:205,y:130,z:5}, {x:300,y:150,z:3},{x:260,y:210,z:1}, {x:375,y:215,z:3},{x:155,y:230,z:2}, {x:30,y:270,z:4},]; function fall(context){ context.fillStyle = "#000"; context.fillRect(0,0,420,280); context.fillStyle = "#fff"; for(var i=0,len=snowPos.length;i<len;i++){ context.save(); context.translate(snowPos[i].x,snowPos[i].y); context.rotate((Math.random()*6-3)*Math.PI/10); snowPos[i].y += Math.random()*18; if(snowPos[i].y>280){ snowPos[i].y=4; } createFlower(context,6,0,0,snowPos[i].z,8); context.fill(); context.restore(); } } var canvas = document.getElementById("mc"); var ctx = canvas.getContext("2d"); setInterval("fall(ctx);",200); </script>