canvas 绘制黑夜山峦与流星效果-html代码-BFW代码库

canvas 绘制黑夜山峦与流星效果

代码语言：html

所属分类：动画

代码描述：canvas 绘制黑夜山峦与流星效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <meta charset="utf-8">

    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        body, html {
            background-color: #000;
            color: #fff;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            position: absolute;
            top: 0;
            left: 0
        }
    </style>
</head>
<body>
    <canvas id="bgCanvas"></canvas>
</body>
<script>
    (function () {
        var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
        window.requestAnimationFrame = requestAnimationFrame;
    })();

    // Terrain stuff.
    var background = document.getElementById("bgCanvas"),
    bgCtx = background.getContext("2d"),
    width = window.innerWidth,
    height = document.body.offsetHeight;

    (height < 400) ? height = 400: height;

    background.width = width;
    background.height = height;

    function Terrain(options) {
        options = options || {};
        this.terrain = document.createElement("canvas");
        this.terCtx = this.terrain.getContext("2d");
        this.scrollDelay = options.scrollDelay || 90;
        this.lastScroll = new Date().getTime();

        this.terrain.width = width;
        this.terrain.height = height;
        this.fillStyle = options.fillStyle || "#191D4C";
        this.mHeight = options.mHeight || height;

        // generate
        this.points = [];

        var displacement = options.displacement || 140,
        power = Math.pow(2, Math.ceil(Math.log(width) / (Math.log(2))));

        // set the start height and end height for the terrain
        this.points[0] = this.mHeight; //(this.mHeight - (Math.random() * this.mHeight / 2)) - displacement;
        this.points[power] = this.points[0];

        // create the rest of the points
        for (var i = 1; i < power; i *= 2) {
            for (var j = (power / i) / 2; j < power; j += power / i) {
                this.points[j] = ((this.points[j - (power / i) / 2] + this.points[j + (power / i) / 2]) / 2) + Math.floor(Math.random() * -displacement + displacement);
            }
            displacement *= 0.6;
        }

        document.body.appendChild(this.terrain);
    }

    Terrain.prototype.update = function () {
        // draw the terrain
        this.terCtx.clearRect(0, 0, width, height);
        this.terCtx.fillStyle = this.fillStyle;

        if (new Date().getTime() > this.lastScroll + this.scrollDelay) {
            this.lastScroll = new Date().getTime();
            this.points.push(this.points.shift());
        }

        this.terCtx.beginPath();
        for (var i = 0; i <= width; i++) {
            if (i === 0) {
                this.terCtx.moveTo(0, this.points[0]);
            } else if (this.points[i] !== u.........完整代码请登录后点击上方下载按钮下载查看