js实现canvas电流闪电放电动画效果代码-html代码-BFW代码库

js实现canvas电流闪电放电动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas电流闪电放电动画效果代码，可调节闪电角度、速度、颜色、厚度及模糊度。

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
            font-family: sans-serif;
            padding: 0;
            margin: 0;
            background-color: #222;
            overflow: hidden;
            -webkit-user-select: none;
               -moz-user-select: none;
                 -o-user-select: none;
                -ms-user-select: none;
                    user-select: none;
        }
        
        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>




</head>

<body>
    <canvas id='c'></canvas>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script>
        /**
         * requestAnimationFrame
         */
        window.requestAnimationFrame = function () {
          return window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function (callback) {
            window.setTimeout(callback, 1000 / 60);
          };
        }();
        
        
        /**
         * Vector
         */
        function Vector(x, y) {
          this.x = x || 0;
          this.y = y || 0;
        }
        
        Vector.add = function (a, b) {
          return new Vector(a.x + b.x, a.y + b.y);
        };
        
        Vector.sub = function (a, b) {
          return new Vector(a.x - b.x, a.y - b.y);
        };
        
        Vector.prototype = {
          set: function (x, y) {
            if (typeof x === 'object') {
              y = x.y;
              x = x.x;
            }
            this.x = x || 0;
            this.y = y || 0;
            return this;
          },
        
          add: function (v) {
            this.x += v.x;
            this.y += v.y;
            return this;
          },
        
          sub: function (v) {
            this.x -= v.x;
            this.y -= v.y;
            return this;
          },
        
          scale: function (s) {
            this.x *= s;
            this.y *= s;
            return this;
          },
        
          length: function () {
            return Math.sqrt(this.x * this.x + this.y * this.y);
          },
        
          normalize: function () {
            var len = Math.sqrt(this.x * this.x + this.y * this.y);
            if (len) {
              this.x /= len;
              this.y /= len;
            }
            return this;
          },
        
          angle: function () {
            return Math.atan2(this.y, this.x);
          },
        
          distanceTo: function (v) {
            var dx = v.x - this.x,
            dy = v.y - this.y;
            return Math.sqrt(dx * dx + dy * dy);
          },
        
          distanceToSq: function (v) {
            var dx = v.x - this.x,
            dy = v.y - th.........完整代码请登录后点击上方下载按钮下载查看