原生js实现雷雨交加的效果-html代码-BFW代码库

原生js实现雷雨交加的效果

代码语言：html

所属分类：动画

代码描述：原生js实现雷雨交加的效果

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

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

<style>
* {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
  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">
<canvas id="canvasThunder">Canvas not supported.</canvas>
<canvas id="canvasCloud">Canvas not supported.</canvas>
<canvas id="canvasRain">Canvas not supported.</canvas>

<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 = 10;
    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.c = 'rgb(201, 162, 198)';
    };

    Thunder.prototype.draw = function () {
      var ctx = this.ctx;
      ctx.beginPath();
      ctx.lineWidth = this.r;
      ctx.strokeStyle = this.c;
      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 () {
      if (this.y > this.l) {
        this.init(rand(0, X), rand(0, Y / 3), rand(1, 5));
      }
    };

    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, r) {
      this.ctx = ctx;
      this.init(x, y, r);
    }

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

    };

    Rain.prototype.draw = function () {
      var ctx = this.ctx;
      ctx.beginPath();
      ctx.fillStyle = this.c;
      ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
      ctx.fill();
    };

    Rain.prototype.updatePosition = function () {
      this.y += this.v.y;
    };

    Rain.prototype.wrapPosition = function () {
      if (this.y > Y) {
        this.y = 0;
      }
    };

    Rain.prototype.resize = function () {
      this.x = rand(0, X);
      this.y =.........完整代码请登录后点击上方下载按钮下载查看