canvas电闪雷鸣下雨动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        /********************
  Common
********************/

        html, body {
            height: 100%;
            width: 100%;
            font-family: Helvetica, verdana, monospace;
            color: #FFFFFF;
            font-size: 100%;
            padding: 0;
            margin: 0;
            letter-spacing: 0.2rem;
            overflow: hidden;
            background: #131041;
        }

        a {
            color: #FFF;
            text-decoration: none;
        }

        h1 {
            font-size: 1.6rem;
        }

        h2 {
            padding: 0.8rem 0 0 0;
        }

        p {
            padding: 0.8rem 0;
            font-size: 0.8rem;
        }

        div#main {
            position: absolute;
            top: 0;
            left: 0;
            padding: 1.6rem;
            z-index: 4;
        }

        /********************
  Contents
********************/

        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }

        canvas#canvasThunder {
            z-index: 1;
            background: #131041;
        }

        canvas#canvasCloud {
            z-index: 2;
        }

        canvas#canvasRain {
            z-index: 3;
        }
    </style>

</head>
<body translate="no">

  

    <div id="contents">
        <canvas id="canvasThunder">This browser cannot use a canvas.</canvas>
        <canvas id="canvasCloud">This browser cannot use a canvas.</canvas>
        <canvas id="canvasRain">This browser cannot use a canvas.</canvas>
    </div>

    <script>
        (function () {
            'use strict';
            window.addEventListener('load', function () {
                var canvasThunder = document.getElementById('canvasThunder');
                var canvasCloud = document.getElementById('canvasCloud');
                var canvasRain = document.getElementById('canvasRain');

                if (!canvasThunder || !canvasThunder.getContext) {
                    return false;
                }

                /********************
                Random Number
                ********************/

                function rand(min, max) {
                    return Math.floor(Math.random() * (max - min + 1) + min);
                }

                /********************
                Var
                ********************/

                var canvasThunderCtx = canvasThunder.getContext('2d');
                var canvasCloudCtx = canvasCloud.getContext('2d');
                var canvasRainCtx = canvasRain.getContext('2d');
                var X = canvasThunder.width = canvasRain.width = canvasCloud.width = window.innerWidth;
                var Y = canvasThunder.height = canvasRain.height = canvasCloud.height = window.innerHeight;

                /********************
                Animation
                ********************/

                window.requestAnimationFrame =
                window.requestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (cb) {
                    setTimeout(cb, 17);
                };

                /********************
                Thunder
                ********************/

                var thunderNum = 5;
                var thunders = [];

                function Thunder(ctx, x, y, r) {
                    this.ctx = ctx;
                    this.init(x, y, r);
                }

                Thunder.prototype.init = function (x, y, r) {
                    this.x = x;
                    this.y = y;
                    this.r = r;
                    this.l = rand(Y, Y * 3);
                    this.m = rand(100, 200);
                    this.c = 'rgb(201, 162, 198)';
                };

                Thunder.prototype.draw = function () {
                    var ctx = this.ctx;
                    ctx.beginPath();
                    ctx.lineWidth = this.r;
                    ctx.strokeStyle = this.c;
                    ctx.shadowColor = this.c;
                    ctx.shadowBlur = 0;
                    ctx.moveTo(this.x, this.y);
                    this.x += rand(-10, 10);
                    this.y += rand(10, 15);
                    ctx.lineTo(this.x, this.y);
                    ctx.stroke();
                };

                Thunder.prototype.updateParams = function () {
                    this.m -= 1;
                    if (this.y > this.l) {
                        this.init(rand(0, X), rand(0, Y / 3), rand(1, 5));
                    }
                    if (this.m < 0) {
                        var ctx = this.ctx;
                        ctx.fillStyle = 'rgb(128, 128, 128)';
                        ctx.fillRect(0, 0, X, Y);
                        this.m = rand(100, 200);
                    }
                };

                Thunder.prototype.render = function () {
                    this.updateParams();
                    this.draw();
                };

                for (var i = 0; i < thunderNum; i++) {
                    var thunder = new Thunder(canvasThunderCtx, rand(0, X), rand(0, Y / 3), rand(1, 5));
                    thunders.push(thunder);
                }

                /********************
                Rain
                ********************/

                var rainNum = 100;
                var rains = [];
                var rainSpeed = 10;

                function Rain(ctx, x, y, l) {
                    this.ctx = ctx;
                    this.init(x, y, l);
                }

                Rain.prototype.init = function (x, y, l) {
                    this.x = x;
                    this.y = y;
                    this.l = l;
                    this.c = 'rgb(179, 203, 255)';
                    this.v = {
                        y: rainSpeed
                    };

                };

                Rain.prototype.draw = function () {
                    var ctx = this.ctx;
                .........完整代码请登录后点击上方下载按钮下载查看