canvas可调参数彩色线条流动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：canvas可调参数彩色线条流动动画效果代码

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

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

<head>

  <meta charset="UTF-8">

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

input[type=text] {
  caret-color: auto;
}

#menu {
  font-size: 80%;
  margin: 0;
  padding: 5px;
  position: absolute;
  left: 5px;
  top: 5px;
  border-radius: 10px;
  background-color: rgba(255, 255, 128, 0.9);
  color: black;
  z-index: 10;
}

#menu.hidden #showhide{
  display: none;
}

#controls {
  margin-top: 0px;
  margin-bottom: 0px;

}

#menu button {
  margin-right: 5px;
  margin-left: 5px;
  border-radius: 5px;
}

#menu .center {
  text-align: center;
}

#colorspan {
  width: 3em;
  margin: 0 5px;
  padding: 0 1em;
  border: 1px solid black;
}

#colorspan.colorful {
  background: linear-gradient(to right, orange 20%, green 21%, green 40%, fuchsia 41%, fuchsia 60%,yellow 61%, yellow 80%, blue 81%, blue);
}
</style>



</head>

<body >
  <div id ="menu">
<p id="controls">close controls</p>
<div id="showhide">
<hr>
<p>speed field :</p>
<p><input type="range" min=30 max=150 step="any" value=70 id="wavelength"> wavelength</p>
<p><input type="range" min=0 max=1 step="any" value=0.5 id="amplitude"> amplitude</p>
<hr>
<p>particles :</p>
<p><input type="range" min=0 max=400 step="any" value=180 id="hue"> color <span id=colorspan></span></p>
<p><input type="range" min=1 max=30 step="any" value=10 id="diam"> diameter</p>
<p><input type="checkbox" id="randomdiam"> random diameter</p>
<p><input type="checkbox" id="ftl" checked> from top left</p>
<p><input type="checkbox" id="fbr"> from bottom right</p>
<hr>
<p class=center><button id=pattern>Draw pattern</button></p>
<p id="patternstatus">In progress. Please wait</p>
<hr>
<p>click canvas to reset</p>
</div> <!-- showhide -->
</div> <!-- menu -->

  
      <script >
"use strict";

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

  const speed = 3; // intensity of field at the triangle vertices
  const nbParticles = 100;
  const lifeTime = 10000 / speed;

  let ui, uiv;

  let canv, ctx; // canvas and context
  let maxx, maxy; // canvas dimensions
  let nbx, nby; // number of triangles

  let triangles; // array of triangles
  let particles; // array of particles
  let fields;
  let messages;
  let triWidth, triHeight; // length of triangle side

  let lineColor;
  let nbx2, nby2, midx, midy;
  let nbAlive;
  let nbGen;

  // 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 m2PI = Math.PI * 2;
  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;
  const mPIS3 = Math.PI / 3;

  const sinPIS6 = 0.5;
  const cosPIS6 = rac3s2;
  const sinPIS3 = cosPIS6;
  const cosPIS3 = sinPIS6;

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

  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
  }

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

  /* returns intermediate .........完整代码请登录后点击上方下载按钮下载查看