雨落青衫湿（转载）

最新推荐文章于 2019-07-04 11:31:42 发布

_let

最新推荐文章于 2019-07-04 11:31:42 发布

阅读量305

点赞数

分类专栏：前端文章标签： canvas

前端专栏收录该内容

34 篇文章 0 订阅

订阅专栏

本文转载自：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>