雨落青衫湿（转载）

来源：互联网发布：电脑录屏软件编辑：程序博客网时间：2024/04/24 23:26
本文转载自：http://blog.csdn.net/pandora_madara/article/details/38091625
这里写图片描述
<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(200, 220, 235, 0.65)";                context.fillRect( 0, 0, canvas_width, canvas_height );                context.fillStyle = "#eef";                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, 20 )        }    </script></head><body onload="rain()"><canvas id="sky" width="800" height="400"></canvas><!--<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>--></body></html>
阅读全文
0 0