夏天快到了，热不热？下雪啦

最新推荐文章于 2024-11-15 11:24:51 发布

小黑子wjw

最新推荐文章于 2024-11-15 11:24:51 发布

阅读量75

点赞数

文章标签： html Powered by 金山文档

本文链接：https://blog.csdn.net/WJW_harrypotter/article/details/129330918

版权

夏天快到了，热不热？下雪啦

先看看我的另一篇文章：https://blog.csdn.net/WJW_harrypotter/article/details/129330879?spm=1001.2014.3001.5501

步骤：将下面的代码原封不动的输送进去

<head>
 
    <meta charset="UTF-8">
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
    <title>下雪啦</title>
 
    <!-- <script src="lib.js"></script> -->
 
    <style>
 
        * {
 
            margin: 0;
 
            padding: 0;
 
        }
 
 
 
        body {
 
            overflow: hidden;
 
        }
 
    </style>
 
</head>
 
 
 
<body>
 
    <script>
 
        window.onload = function () {
 
            var Canvas = function (w, h) {
 
                this.width = w;
 
                this.height = h;
 
            }
 
            Canvas.prototype = {
 
                init: function () {
 
                    var oC = document.createElement("canvas");
 
                    oC.setAttribute('width', this.width);
 
                    oC.setAttribute('height', this.height);
 
                    oC.setAttribute('id', 'canvas');
 
                    oC.style.backgroundColor = '#000';
 
                    document.body.appendChild(oC);
 
                }
 
            }
 
            var curWinWidth = window.innerWidth,
 
                curWinHeight = window.innerHeight;
 
            var oCanvas = new Canvas(curWinWidth, curWinHeight);
 
            oCanvas.init();
 
 
 
            var oC = document.querySelector('#canvas');
 
            var width = oC.width, height = oC.height, oGc = oC.getContext('2d');
 
 
 
            function random(min, max) {
 
                return Math.random() * (max - min) + min;
 
            }
 
            var Snow = function () {
 
 
 
            }
 
            Snow.prototype = {
 
                init: function () {
 
                    this.x = random(0, width);
 
                    this.y = 0;
 
                    this.r = random(1, 5);
 
                    this.vy = random(3, 5);
 
                },
 
                draw: function (cxt) {
 
                    cxt.beginPath();
 
                    cxt.fillStyle = 'white';
 
                    cxt.arc(this.x, this.y + this.r, this.r, 0, Math.PI * 2, false);
 
                    cxt.fill();
 
                    cxt.closePath();
 
                    this.update(cxt);
 
                },
 
                update: function (cxt) {
 
                    if (this.y < height - this.r) {
 
                        this.y += this.vy;
 
                    } else {
 
                        this.init();
 
                    }
 
                }
 
            }
 
 
 
            var snow = [];
 
            for (var i = 0; i < 500; i++) {
 
                setTimeout(function () {
 
                    var oSnow = new Snow();
 
                    oSnow.init();
 
                    snow.push(oSnow);
 
                }, 10 * i);
 
            }
 
 
 
            (function move() {
 
                oGc.clearRect(0, 0, width, height);
 
                for (var i = 0; i < snow.length; i++) {
 
                    snow[i].draw(oGc);
 
                }
 
                requestAnimationFrame(move);
 
            })();
 
        }
 
    </script>
 
</body>

搞定！