simplex-noise实现canvas闪电交互动画效果代码-html代码-BFW代码库

simplex-noise实现canvas闪电交互动画效果代码

代码语言：html

所属分类：动画

代码描述：simplex-noise实现canvas闪电交互动画效果代码

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

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

<head>
  <meta charset="UTF-8">

  
  
<style>
body {
    font-family: Helvetica 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.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);};
}();


/**
 * Lightning
 */
var Lightning = function (window) {

  /**
   * LightningAbstract
   */
  var LightningAbstract = {
    points: null,
    children: null,
    _simplexNoise: new SimplexNoise(),

    render: function (ctx, controls) {
      this._update(controls);
      this._draw(ctx);
    },

    _update: function (controls) {
      throw new Error('Not override');
    },

    _draw: function (ctx) {
      var points = this.points,
      isRoot = false,opts,
      p,p1,dx,dy,dist,
      lineWidth,
      i,len;

      isRoot = !this.parent;
      opts = isRoot ? this : this.parent;

      if (isRoot) {// is root
        var radius,gradient,
        children = this.children,c;

        ctx.save();
        for (i = 0, len = points.length; i < len; i += len - 1) {
          p = points[i];
          radius = Math.random() * (8 - 3) + 3;
          gradient = ctx.createRadialGradient(p.x, p.y, radius / 3, p.x, p.y, radius);
          gradient.addColorStop(0, this._colorToString(1));
          gradient.addColorStop(1, this._colorToString(0));
          ctx.fillStyle = gradient;
          ctx.beginPath();
          ctx.arc(p.x, p.y, radius, 0, Math.PI * 2, false);
          ctx.fill();
        }
        ctx.restore();

        for (i = 0, len = children.length; i < len; i += len - 1) {
          children[i].render(ctx);
        }
      }

      ctx.save();
      ctx.globalCompositeOperation = 'lighter';
      ctx.lineCap = 'round';
      ctx.fillStyle = 'rgba(0, 0, 0, 1)';
      ctx.shadowBlur = opts.blur;
      ctx.shadowColor = this._colorToString(1);
      ctx.beginPath();
      for (i = 0, len = points.length; i < len; i++) {
        p = points[i];
        if (len > 1) {
          p1 = points[i === len - 1 ? i - 1 : i + 1];
          dx = p.x - p1.x;
          dy = p.y - p1.y;
          dist = Math.sqrt(dx * dx + dy * dy);
        } else {
          dist = 0;
        }
        if (dist > 30) dist = 30;
        ctx.moveTo(p.x + dist, p.y);
        ctx.arc(p.x, p.y, dist, 0, Math.PI * 2, false);
      }
      ctx.fill();
      ctx.restore();

      ctx.save();
      ctx.beginPath();
      ctx.strokeStyle = this._colorToString(Math.random() * (opts..........完整代码请登录后点击上方下载按钮下载查看