画布动态背景

HTML5画布游戏动态背景设计效果
使用HTML5画布基础方法arc生成的一个动态背景效果~~
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画布背景</title>
    <style type="text/css">
        body {
            margin:0px;
            padding:0px;
            text-align:center;
        }

        canvas{
            outline:0;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
<canvas id='c'></canvas>
<script>
    /*Javascript代码片段*/

    var width = 1000,
            height = 1000,
            c = document.getElementById('c'),
            ctx = c.getContext('2d');

    c.width = width;
    c.height = height;

    var clear = function(){
        ctx.fillStyle = '#d0e7f9';
        ctx.beginPath();
        ctx.rect(0, 0, width, height);
        ctx.closePath();
        ctx.fill();
    }

    var howManyCircles = 8, circles = [];

    for (var i = 0; i < howManyCircles; i++)
        circles.push([Math.random() * width, Math.random() * height, Math.random() * 100, Math.random() / 2]);

    var DrawCircles = function(){
        for (var i = 0; i < howManyCircles; i++) {
            ctx.fillStyle = 'rgba(255, 255, 255, ' + circles[i][3] + ')';
            ctx.beginPath();
            ctx.arc(circles[i][0], circles[i][1], circles[i][2], 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fill();
        }
    };

    var MoveCircles = function(deltaY){
        for (var i = 0; i < howManyCircles; i++) {
            if (circles[i][1] - circles[i][2] > height) {
                circles[i][0] = Math.random() * width;
                circles[i][2] = Math.random() * 100;
                circles[i][1] = 0 - circles[i][2];
                circles[i][3] = Math.random() / 2;
            } else {
                circles[i][1] += deltaY;
            }
        }
    };

    var width = 1000,
            height = 1000,
            gLoop;

    var GameLoop = function(){
        clear();
        MoveCircles(3);
        DrawCircles();
        gLoop = setTimeout(GameLoop, 1000 / 50);
    }

    GameLoop();
</script>
</body>
</html>
猜你喜欢
