js实现canvas彩色图案背景效果代码-html代码-BFW代码库

代码语言：html
所属分类：背景
代码描述：js实现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;
}
</style>




</head>

<body >

  
      <script >
"use strict";

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

  const RADIUSMIN = 0.1;
  const RADIUSMAX = 0.2;

  let rndSeed = Math.random();

  let canv, ctx; // canvas and context
  let maxx, maxy; // canvas dimensions
  let nbx, nby;
  let uiv;
  let grid;
  let rndStruct;
  let lRef;
  let mouse;

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

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

  /* based on a function found at https://www.grc.com/otg/uheprng.htm
  and customized to my needs
  
  use :
    x = Mash('1213'); // returns a resettable, reproductible pseudo-random number generator function
    x = Mash();  // like line above, but uses Math.random() for a seed
    x();         // returns pseudo-random number in range [0..1[;
    x.reset();   // re-initializes the sequence with the same seed. Even if Mash was invoked without seed, will generate the same sequence.
    x.seed;      // retrieves the internal seed actually used. May be useful if no seed or non-string seed provided to Mash
                 be careful : this internal seed is a String, even if it may look like a number. Changing or omitting any single digit will produce a completely different sequence
    x.intAlea(min, max) returns integer in the range [min..max[ (or [0..min[ if max not provided)
    x.alea(min, max) returns float in the range [min..max[ (or [0..min[ if max not provided)
  */

  /*	============================================================================
  	This is based upon Johannes Baagoe's carefully designed and efficient hash
  	function for use with JavaScript.  It has a proven "avalanche" effect such
  	that every bit of the input affects every bit of the output 50% of the time,
  	which is good.	See: http://baagoe.com/en/RandomMusings/hash/avalanche.xhtml
  	============================================================================
  */
  /* seed may be almost anything not evaluating to false */
  function Mash(seed) {
    let n = 0xefc8249d;
    let intSeed = (seed || Math.random()).toString();

    function mash(data) {
      if (data) {
        data = data.toString();
        for (var i = 0; i < data.length; i++) {
          n += data.charCodeAt(i);
          var h = 0.02519603282416938 * n;
          n = h >>> 0;
          h -= n;
          h *= n;
          n = h >>> 0;
          h -= n;
          n += h * 0x100000000; // 2^32
        }
        return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
      } else n = 0xefc8249d;
    };
    mash(intSeed); // initial value based on seed

    let mmash = () => mash('A'); // could as well be 'B' or '!' or any non falsy value
    mmash.reset = () => {mash();mash(intSeed);};
    Object.defineProperty(mmash, 'seed', { get: () => intSeed });
    mmash.intAlea = function (min, max) {
      if (typeof max == 'undefined') {
        max = min;min = 0;
      }
      return mfloor(min + (max - min) * this());
    };
    mmash.alea = function (min, max) {
      // random number [min..max[ . If no max is provided, [0..min[

      if (typeof max == 'undefined') return min * this();
      return min + (max - min) * this();
    };
    return mmash;
  } // Mash

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

  function hslString(h, s = 100, l = 50) {
    return `hsl(${h},${s}%,${l}%)`;
  } // hslString


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

  function lerp(p1, p2, alpha) {
    const omalpha = 1 - alpha;
    return [p1[0] * omalpha + p2[0] * alpha,
    p1[1] * omalpha + p2[1] * alpha];
  } // lerp

  //------------------------------------------------------------------------
  function Hexagon(kx, ky) {
    this.kx = kx;
    this.ky = ky;
    this.hPoints = new Array(12).fill(0).map((v, k) => new HalfPoint(this, k));

  } // Hexagon

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

  Hexagon.prototype.calculateArc = function (arc) {

    if (!this.pos) this.calculatePoints();

    const kp0 = arc.p0.khp;
    const kp1 = arc.p1.khp;

    let khp0 = kp0,khp1 = kp1;
    // is starting point is odd, take symmetric to start from even point
    if (kp0 & 1) {
      khp0 = 11 - kp0;
      khp1 = 11 - kp1;
    }
    khp1 = (khp1 - khp0 + 12) % 12; // relative index from khp0 to khp1;
    const coeffBeg = Hexagon.coeffBeg[khp1] * uiv.radius;
    const coeffEnd = Hexagon.coeffEnd[khp1] * uiv.radius;
    const side0 = mfloor(kp0 / 2);
    const side1 = mfloor(kp1 / 2);
    const p0 = this.pos[kp0];
    const p1 = this.pos[kp1];
    const pax = p0[0] + Hexagon.perp[side0][0] * coeffBeg;
    const pay = p0[1] + Hexagon.perp[side0][1] * coeffBeg;
    const pbx = p1[0] + Hexagon.perp[side1][0] * coeffEnd;
    const pby = p1[1] + Hexagon.perp[side1][1] * coeffEnd;

    arc.bez = [p0, [pax, pay], [pbx, pby], p1];

  }; // Hexagon.prototype.calculateArc

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  Hexagon.prototype.drawArc = function (arc, withoutMoveTo) {

    // just draws path, doest not stroke nor fill

    //  if (! arc.bez) this.calculateArc(arc);
    let bez = arc.bez;
    if (!withoutMoveTo) ctx.moveTo(bez[0][0], bez[0][1]);
    ctx.bezierCurveTo(bez[1][0], bez[1][1], bez[2][0], bez[2][1], bez[3][0], bez[3][1]);
  }; // Hexagon.prototype.drawArc

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  Hexagon.prototype.createArcs = function () {

    /* we divide the hexagon to create 2 groups of 6 points
    for every group we pick a point at random among the 6 points
    we connect it by arcs to the other 5 
    */
    let p1, arc;
    const randDivision = 2 * rndStruct.intAlea(6);
    const grp1 = new Array(6).fill(0).map((v, k) => (k + randDivision) % 12);
    const grp2 = grp1.map(v => (v + 6) % 12);

    // create first group
    let k0 = grp1[rndStruct.intAlea(6)];
    let p0 = this.hPoints[k0];
    this.center0 = p0; // memorize 'center' of 1st group
    grp1.forEach(khPoint => {
      p1 = this.hPoints[khPoint];
      if (p1 == p0) return;
      arc = new Arc(p0, p1);
      this.calculateArc(arc);
    });
    // create second group
    k0 = grp2[rndStruct.intAlea(6)];
    p0 = this.hPoints[k0];
    this.center1 = p0; // memorize 'center' of 2nd group
    grp2.forEach(khPoint => {
      p1 = this.hPoints[khPoint];
      if (p1 == p0) return;
      arc = new Arc(p0, p1);
      this.calculateArc(arc);
    });
  }; // Hexagon.prototype.createArcs

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

  Hexagon.prototype.calculatePoints = function () {

    this.xc = (maxx - (nbx - 1) * 1.5 * uiv.radius) / 2 + 1.5 * uiv.radius * this.kx;
    let y0 = (maxy - (nby - 0.5) * rac3 * uiv.radius) / 2;
    if ((this.kx & 1) == 0) y0 += uiv.radius * rac3s2;
    this.yc = y0 + this.ky * uiv.radius * rac3;
    this.pos = Hexagon.positions.map(p => [this.xc + p[0] * uiv.radius, this.yc + p[1] * uiv.radius]);

  }; // Hexagon.prototype.calculatePoints

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

  Hexagon.prototype.drawArcs = function () {
    ctx.beginPath();
    this.center0.arcs.forEach(arc => this.drawArc(arc));
    this.center1.arcs.forEach(arc => this.drawArc(arc));
    ctx.lineWidth = uiv.lineWidth;
    ctx.strokeStyle = hslString(globHue, 100, 50);
    ctx.stroke();
  }; // Hexagon.prototype.drawArcs
  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  function calcHexagon() {
    Hexagon.k0 = rndStruct.alea(0.15, 0.22);

    Hexagon.vertices = [[1, 0], [0.5, rac3s2], [-0.5, rac3s2], [-1, 0], [-0.5, -rac3s2], [0.5, -rac3s2]];

    Hexagon.positions = [lerp(Hexagon.vertices[0], Hexagon.vertices[1], 0.5 - Hexagon.k0),
    lerp(Hexagon.vertices[0], Hexagon.vertices[1], 0.5 + Hexagon.k0),
    lerp(Hexagon.vertices[1], Hexagon.vertices[2], 0.5 - Hexagon.k0),
    lerp(Hexagon.vertices[1], Hexagon.vertices[2], 0.5 + Hexagon.k0),
    lerp(Hexagon.vertices[2], Hexagon.vertices[3], 0.5 - Hexagon.k0),
    lerp(Hexagon.vertices[2], Hexagon.vertices[3], 0.5 + Hexagon.k0),
    lerp(Hexagon.vertices[3], Hexagon.vertices[4], 0.5 - Hexagon.k0),
    lerp(Hexagon.vertices[3], Hexagon.vertices[4], 0.5 + Hexagon.k0),
    lerp(Hexagon.vertices[4], Hexagon.vertices[5], 0.5 - Hexagon.k0),
    lerp(Hexagon.vertices[4], Hexagon.vertices[5], 0.5 + Hexagon.k0),
    lerp(Hexagon.vertices[5], Hexagon.vertices[0], 0.5 - Hexagon.k0),
    lerp(Hexagon.vertices[5], Hexagon.vertices[0], 0.5 + Hexagon.k0)];
    Hexagon.coeffBeg = [0, 0.3, 0.3, 0.4, 0.5, 0.6, 1, 0.7, 0.5, 0.5, 0.4, 0.2];
    Hexagon.coeffEnd = [0, 0.2, 0.3, 0.3, 0.5, 0.6, 0.7, 0.7, 0.6, 0.6, 0.3, 0.3];
    Hexagon.perp = [[-rac3s2, -0.5],
    [0, -1],
    [rac3s2, -0.5],
    [rac3s2, 0.5],
    [0, 1],
    [-rac3s2, 0.5]]; // perpendicular to sides - towards center
  }
  //------------------------------------------------------------------------
  function Arc(p0, p1) {
    /* create Arc between 2 half-points (of the same Hexagon) */

    this.p0 = p0;
    this.p1 = p1;
    this.hexagon = p0.parent;
    if (p1.parent !== p0.parent) throw "arc between 2 Hexagons ???";
    if (!p0.arcs) p0.arcs = [];
    p0.arcs.push(this);
    p1.arc = this;

  }

  Arc.prototype.reverse = function () {
    [this.p0, this.p1] = [this.p1, this.p0];
    if (this.bez) this.bez.reverse();
  };
  //------------------------------------------------------------------------

  f.........完整代码请登录后点击上方下载按钮下载查看