疯狂讲义随笔——坐标变换模拟雪花飘落

来源：互联网发布：it行业发展方向编辑：程序博客网时间：2024/06/07 02:15
代码如下：
<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>    #div1{        height:600px;        border:1px solid black;    }    #demo{        border:thin dashed red;    }    </style></head><body>    <div id="div1">        <canvas id="demo" height="280" width="420"></canvas>    </div>    <script>    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:20,y:4},        {x:60,y:4},        {x:100,y:4},        {x:140,y:4},        {x:180,y:4},        {x:220,y:4},        {x:260,y:4},        {x:300,y:4},        {x:340,y:4},        {x:380,y: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()*8;            if(snowPos[i].y>280){                snowPos[i].y=4;            }            createFlower(context,6,0,0,5,8);            context.fill();            context.restore();        }    }    var canvas=document.getElementById("demo").getContext("2d");    setInterval("fall(canvas)",200);    </script></body></html>
阅读全文
0 0