用canvas制作动态下雨 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{padding: 0;margin: 0;}
        .myCanvas{
            background: #ECF3F8;
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
    <canvas class="myCanvas" height="500px" width="500px"></canvas>
</body>
<script>
    window.onload = function(){
        var c = document.getElementsByClassName('myCanvas')[0];
        var ctx = c.getContext('2d');
        ctx.fillStyle = ('rgba(36,196,191,0.8)');

        function myX() {
            window.requestAnimationFrame(myX);
            var x = 0, y = 0,h = 0;
            x = Math.floor(Math.random() * 500);
            h = Math.floor(Math.random()*30+10);
            function myY() {
                ctx.beginPath();
                y += 8;
                ctx.fillRect(x, y, 2, h);
                window.requestAnimationFrame(myY);
            }
            myY();
            ctx.clearRect(0, 0, 500, 500);
        }
        myX();
    }
</script>
</html>

 

posted on 2017-06-27 16:06  轻触快乐  阅读(218)  评论(0)    收藏  举报

导航