js实现canvas下雪雪花飞舞动画效果代码

代码语言:html

所属分类:粒子

代码描述:js实现canvas下雪雪花飞舞动画效果代码

代码标签: 下雪 雪花 飞舞 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>

        body {
            height: 100vh;
            width: 100vw;
            background-image: url('//repo.bfw.wiki/bfwrepo/image/5df0355083a46.png');
            background-size: cover;

            margin: 0px;
            overflow: hidden;

        }

       

    </style>



</head>

<body>
    <canvas id='canv'></canvas>




    <script>
        var c = document.getElementById('canv'),
        $ = c.getContext("2d");
       

        var w = c.width = window.innerWidth,
        h = c.height = window.innerHeight;

        Snowy();
        function Snowy() {
            var snow,
            arr = [];
            var num = 600,
            tsc = 1,
            sp = 1;
            var sc = 1.3,
            t = 0,
            mv = 20,
            min = 1;
            for (var i = 0; i < num; ++i) {
                snow = new Flake();
                snow.y = Math.random() * (h + 50);
                snow.x = Math.random() * w;
                snow.t = Math.random() * (Math.PI * 2);
                snow.sz = 100 / (10 + Math.random() * 100) * sc;
                snow.sp = Math.pow(snow.sz * .8, 2) * .15 * sp;
                snow.sp = snow.sp < min ? min: snow.sp;
                arr.push(snow);
            }
            go();
            function go() {
                window.requestAnimationFrame(go);
                $.clearRect(.........完整代码请登录后点击上方下载按钮下载查看

网友评论0