线条动画美效果-html代码-BFW代码库

线条动画美效果

代码语言：html

所属分类：动画

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

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


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

<script>
"use strict";

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

  let canv, ctx;
  let lines;
  let maxx, maxy;
  let yLines;
  let restart;

  /********************************************************
               parameters - play with them
               ********************************************************/

  const bgColor = '#004'; // background color
  const nbLines = 6; // number of lines
  const pixelsPerFrame = 3; // sliding speed
  const interLine = 50; // distance between lines - in pixels
  const lineWidth = 5; // line thickness
  const transitionCoeff = 3; // coeff for transition
  const coeffBezier = 0.5; // coeff for Bezier curve

  //********************************************************

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

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

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

  //------------------------------------------------------------------------
  function Line(index) {
    /* creates a new, flat line locate on the indexth line
                        Adds this line to the lines array
                        */
    this.index = index; // location in lines
    lines[index] = this; // adds new line to lines

    this.description = [{ kl: index }];
    /* kl alone : ho.........完整代码请登录后点击上方下载按钮下载查看