canvas雪花飘啊飘代码,Css代码库,德仔网

代码语言

代码分类

【Css】 canvas雪花飘啊飘

作者:Dream0303 / 发布于2013/12/26/ 1008

<!DOCTYPE html>
<html>
 <head>
  <title>雪花飘啊飘</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
 </head>
 <body>
  <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>
 </body>
</html>

试试其它关键字

　canvas雪花　

同语言下

可能有用的

Dream0303贡献的其它代码(4)