canvas 雪花背景

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css">
            * {margin: 0;padding: 0;}
            html, body {height: 100%;overflow: hidden;}
        </style>
    </head>
    <body>
        <canvas></canvas>
    </body>
    <script type="text/javascript">
        window.onload = function() {
            var oc = document.querySelector("canvas");
            oc.width = document.documentElement.clientWidth;
            oc.height = document.documentElement.clientHeight;
            
            if (oc.getContext) {
                var ctx = oc.getContext('2d');
                var arr = [];

                setInterval(() => {
                    var x = Math.random() * oc.width;
                    
                    arr.push({
                        x,
                        y: 0,
                        r: Math.round(Math.random() * 5 + 1),
                        deg: 0,
                        step: Math.random()*10
                    });
                }, 100);
                
                setInterval(() => {
                    ctx.clearRect(0, 0, oc.width, oc.height);
                    
                    ctx.fillStyle = "black";
                    ctx.fillRect(0, 0, oc.width, oc.height);
                    
                    for (let i = 0; i < arr.length; i++) {
                        if (arr[i].y >= oc.height) {
                            arr.splice(i, 1);
                        }
                        
                        arr[i].deg += 5;
                        
                        arr[i].y += 2;
                        arr[i].x += 2 * Math.sin(arr[i].deg * Math.PI / 180);
                    }
                    
                    for (let i = 0; i < arr.length; i++) {
                        ctx.save();
                        ctx.fillStyle = "#FFFFFF";
                        const {x, y, r} = arr[i];
                        ctx.beginPath();
                        ctx.arc(x, y, r, 0, 2 * Math.PI);
                        ctx.fill();
                        ctx.restore();
                    }
                }, 1000 / 60);
            }
        }
    </script>
</html>
View Code