雨落青衫湿

最新推荐文章于 2019-08-14 11:02:01 发布

一刀不二

最新推荐文章于 2019-08-14 11:02:01 发布

阅读量1.5k

点赞数 1

分类专栏： [JavaScript] 文章标签： html css javascript

本文链接：https://blog.csdn.net/pandora_madara/article/details/38091625

版权

[JavaScript] 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<html>
    <head>
        <script type="text/javascript">
            function rain() {
                var canvas = document.getElementById( "sky" );
                var context = canvas.getContext( "2d" );
                var canvas_width = canvas.width;
                var canvas_height = canvas.height;
                var rain_start_interval_y = 100;
                var rain_size = 8;

                function ClassRain(){
                    this.size = rain_size * Math.random();
                    this.pos_x = canvas_width * Math.random();
                    this.pos_y = rain_start_interval_y * Math.random();
                    this.dy = 10 * Math.random();
                }

                function beginRain() {
                    context.fillStyle = "rgba(236, 240, 241, 0.65)";
                    context.fillRect( 0, 0, canvas_width, canvas_height );
                    context.fillStyle = "#95a5a6";

                    for( var i = 0; i < rains.length; ++i ){
                        var item = rains[i];
                        context.fillRect( item.pos_x, item.pos_y, item.size, item.size );
                        item.pos_y += item.dy;
                        if( item.pos_y > canvas_height ){
                            item.pos_y = -10;
                        }
                    }
                }
                var rains = [];
                for( var i = 0; i < 100; ++i ){
                    rains.push( new ClassRain() );
                }
                setInterval( beginRain, 25 )
            }
        </script>
    </head>

    <body οnlοad="rain()">
        <canvas id="sky" width="800" height="400"></canvas>
    </body>
</html>