线条伸展动画背景效果-html代码-BFW代码库

代码语言：html

所属分类：背景

代码描述：线条伸展动画背景效果

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

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

<style>
body {
  font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
  background-color: #000;
  margin:0;
  padding:0;
  border-width:0;
  cursor: pointer;
}
</style>

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


<script >
"use strict";

/* As I am beginning this pen, my idea is to imitate
              Electric Field Lines (https://codepen.io/EpicCoder_2002/pen/KERjgm)
              by Ahmed Eltaher (https://codepen.io/EpicCoder_2002)
              */

window.addEventListener("load", function () {

  const AVG_SURFACE = 10000; // pixels²
  const RADIUS = 2;
  const COLOR_POS = '#ff0000';
  const COLOR_NEG = '#0000ff';
  const PART_MIN = 10; // min number of particles starting from each positive source
  const PART_MAX = 50; // max number of particles starting from each positive source
  const SPEED_ANIM = 1;
  const SPEED_PART = 1;

  let canv, ctx; // canvas and context

  let maxx, maxy; // canvas dimensions

  let nbPos, nbNeg;
  let arrPos, arrNeg;
  let particles;
  let nbPart;

  // for animation
  let tStampRef; // time stamp ref for animation
  let events;

  // shortcuts for Math.
  const mrandom = Math.random;
  const mfloor = Math.floor;
  const mround = Math.round;
  const mceil = Math.ceil;
  const mabs = Math.abs;
  const mmin = Math.min;
  const mmax = Math.max;

  const mPI = Math.PI;
  const mPIS2 = Math.PI / 2;
  const mPIS3 = Math.PI / 3;
  const m2PI = Math.PI * 2;
  const m2PIS3 = Math.PI * 2 / 3;
  const msin = Math.sin;
  const mcos = Math.cos;
  const matan2 = Math.atan2;

  const mhypot = Math.hypot;
  const msqrt = Math.sqrt;

  const rac3 = msqrt(3);
  const rac3s2 = rac3 / 2;

  //------------------------------------------------------------------------

  function alea(mini, maxi) {
    // random number in given range

    if (typeof maxi == 'undefined') return mini * mrandom(); // range 0..mini

    return mini + mrandom() * (maxi - mini); // range mini..maxi
  }
  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  function intAlea(mini, maxi) {
    // random integer in given range (mini..maxi - 1 or 0..mini - 1)
    //
    if (typeof maxi == 'undefined') return mfloor(mini * mrandom()); // range 0..mini - 1
    return mini + mfloor(mrandom() * (maxi - mini)); // range mini .. maxi - 1
  }
  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  function removeElement(array, element) {
    let idx = array.indexOf(element);
    if (idx == -1) throw 'Bug ! indexOf -1 in removeElement';
    array.splice(idx, 1);
  } // removeElement

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  let animate;

  {// scope for animate

    let animState = 0;
    let currCell;

    animate = function (tStamp) {

      let event;
      let grp, neighs, found, tinit;

      event = events.pop();
      if (event && event.event == 'reset') animState = 0;
      if (event && event.event == 'click') animState = 0;
      window.requestAnimationFrame(animate);

      tinit = performance.now();
      do {

        switch (animState) {

          case 0:
            if (startOver()) {
              ++animState;
            }
            break;

          case 1:
            if (particles.length == 0) {
              ++animState;
              break;
            }
            particles.forEach(part => part.move());
            break;

          case 2:

            break;}

        // switch
      } while (animState == 1 && performance.now() - tinit < SPEED_ANIM);

    }; // animate
  } // scope for animate

  //------------------------------------------------------------------------

  function Particle(x, y) {
    this.x = x;
    this.y = y;
  }

  Particle.prototype.move = function (x, y) {

    let x0, y0, dx, dy, dist, fx, fy;
    let finished = false;

    x0 = this.x;y0 = this.y.........完整代码请登录后点击上方下载按钮下载查看