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

canvas电闪雷鸣下雨动画效果

代码语言：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;
.........完整代码请登录后点击上方下载按钮下载查看