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;
}
</style>

  
</head>

<body translate="no">
  
  
      <script >
"use strict";



const nbEddies = 7;
const nbParticles = 1003; // number of particles
const lifeTime = 1000; // average lifetime of particles
let noGen;
let canv, ctx; // canvas and drawing context
let maxx, maxy; // size of client Window
let lRef, rWidth, rHeight;

let eddies; // array of eddies
let particles; // array of particles

let messages; // ID provided by window.requestAnimationFrame();
let globHue;
let tbCells, cells, kcell;
let ncx, ncy;

/* shortcuts for Math */

const mrandom = Math.random; // see above alternative function for reproductible results
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 mexp = Math.exp;

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

//-----------------------------------------------------------------------------
// miscellaneous functions
//-----------------------------------------------------------------------------

function alea(min, max) {
  // random number [min..max[ . If no max is provided, [0..min[

  if (typeof max == "undefined") return min * mrandom();
  return min + (max - min) * mrandom();
}

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

function intAlea(min, max) {
  // random integer number [min..max[ . If no max is provided, [0..min[

  if (typeof max == "undefined") {
    max = min;
    min = 0;
  }
  return mfloor(min + (max - min) * mrandom());
} // intAlea

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function arrayShuffle(array) {
  /* randomly changes the order of items in an array
         only the order is modified, not the elements
      */
  let k1, temp;
  for (let k = array.length - 1; k >= 1; --k) {
    k1 = intAlea(0, k + 1);
    temp = array[k];
    array[k] = array[k1];
    array[k1] = temp;
  } // for k
  return array;
} // arrayShuffle

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

class Eddy {
  constructor() {
    this.x = alea(-0.02, rWidth + 0.02);
    this.y = alea(-0.02, rHeight + 0.02);

    this.coeffR = 0.001 * alea(0.7, 1.3); // coefficient for radial velocity
    //        this.coeffR = 0.001 * (alea(0.7, 1.3));        // coefficient for radial velocity
    this.radius = 0.2 + alea(-0.1, 0.1); // radius where angular velocity is max
    //        this.radius = 0.2 + alea(-0.10, 0.10);          // radius where angular velocity is max
    this.coeffA1 = 0.017 * alea(0.8, 1.2); // coefficient in exponent for angular velocity
    //        this.coeffA1 = 0.008 * alea(0.8, 1.2);         // coefficient in exponent for angular velocity
    this.coeffA2 = 0.01 * alea(0.8, 1.2); // multiplying coefficient for angular velocity
    //        this.coeffA2 = 0.015 * alea(0.8, 1.2);       // multiplying coefficient for angular velocity
    this.dir = mrandom() > 0.5 ? 1 : -1; // direction of rotation
  } // constructor

  // for movement of Eddy
} // class Eddy
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function createEddies() {
  eddies = []; // create empty array;
  for (let k = 0; k < nbEddies; ++k) {
    eddies.push(new Eddy());
  } // for k
} // createEddies

//------------------------------------------------------------------------
function sortCells() {
  let d1, d2, d1x, d1y;
  cells.sort((c1, c2) => {
    if (c1.cnt != c2.cnt) return c1.cnt - c2.cnt;
    if (c1.kx < ncx / 2) d1x = c1.kx;else
    d1x = ncx - 1 - c1.kx;
    if (c1.ky < ncy / 2) d1y = c1.ky;else
    d1y = ncy - 1 - c1.ky;
    d1 = mmin(d1x, d1y);
    if (c2.kx < ncx / 2) d1x = c2.kx;else
    d1x = ncx - 1 - c2.kx;
    if (c2.ky < ncy / 2) d1y = c2.ky;else
    d1y = ncy - 1 - c2.ky;
    d2 = mmin(d1x, d1y);
    return d1 - d2;
  });
}
//------------------------------------------------------------------------
class Particle {
  constructor() {
    let c = cells[kcell];
    ++kcell;
    if (kcell > 0.0005 * cells.length) {
      sortCells();
      kcell = 0;
    }

    let x = c.kx + Math.random() - 5; // random point in cell
    let y = c.ky + Math.random() - 5;
    this.x = x / lRef;
    this.y = y / lRef;
    this.sat = `${intAlea(50, 101)}%`;
    this.light = `${intAlea(30, 80)}%`;
    this.TTL = alea(lifeTime * 0.8, lifeTime * 1.2); // time to live
    this.hue =.........完整代码请登录后点击上方下载按钮下载查看