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

最新推荐文章于 2021-06-03 21:30:21 发布

霜月枫桥

最新推荐文章于 2021-06-03 21:30:21 发布

阅读量474

点赞数

分类专栏：疯狂HTML5+CSS3+JavaScript讲义随笔

本文链接：https://blog.csdn.net/MOONCOM/article/details/78320318

版权

疯狂HTML5+CSS3+JavaScript讲义随笔专栏收录该内容

5 篇文章 0 订阅

订阅专栏

代码如下：

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

收藏

觉得还不错? 一键收藏
0
评论
疯狂讲义随笔——坐标变换模拟雪花飘落

代码如下： Document #div1{ height:600px; border:1px solid black; } #demo{ border:thin dashed red; } function cre
复制链接

扫一扫

专栏目录