[代码收集]HTML5 Canvas黑夜雪花飘落特效(随机位置/随机数量) - 笑忘书网页代码收藏馆

首页-代码 2014-03-25 06:13:24 -0400

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

请勿抄袭本页面

代码说明

一款HTML5 Canvas雪花特效，运行网页后可看到动态效果的雪花飘飘落下，随机位置，随机数量，速度可调节。转自源码爱好者

html代码

<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>

代码演示

[代码仅供参考，转载请注明出处]

----Comments(3)----
吾是小明 (@ming2013) | @ at 2014-09-15 05:24:
你好！！能不能教我怎么在内容里面添加链接，就是别人点击就可以穿越过去的

笑忘书 (@35230) | @ at 2014-03-25 11:58:
确实粗糙了点…

翱翔的雄鹰 (@axdxy) | @ at 2014-03-25 08:05:
呃，雪花啊…我下面这个是之前在脚本之家找的，比较粗糙。
http://axdxy.wodemo.com/entry/259306?cid=176115

Subscribe | Register | Login | N