首页 > 代码库 > 雨落青衫湿

雨落青衫湿

2024-07-13 21:10:24   214人阅读



<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 onl oad="rain()">
        <canvas id="sky" width="800" height="400"></canvas>
    </body>
</html>


联系
我们