雨落青衫湿

来源：互联网发布：数据分析师前景编辑：程序博客网时间：2024/04/20 06:14
<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 onload="rain()">        <canvas id="sky" width="800" height="400"></canvas>    </body></html>
1 0