刺绣背景效果-html代码-BFW代码库

代码语言：html

所属分类：背景

代码描述：刺绣背景效果

代码标签：

下面为部分代码预览，完整代码请点击下载或在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";

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

  const triWidthMin = 5; // length of triangle side 5..triWidthMax
  const triWidthMax = 20; // length of triangle side triWidthMin..50
  const DHUE = 1; // integer 1-10 - hue change by step
  const DLUM = 1; // 0.1 - 5 - lightness change by step
  const GAPTRI = -0.5; // -0.5 for black thin line between triangles, +1 for no gap

  let canv, ctx; // canvas and context
  let canvbg, ctxbg; // background canvas and context

  let maxx, maxy; // canvas dimensions

  let triWidth;
  let triHeight;
  let grid;
  let nbx, nby;
  let hnbx, hnby; // number of triangles in the half of the width, height of the canvas

  let groups;
  let listReachable;

  // for animation
  let tStampRef; // time stamp ref for animation
  let animState;
  let events;
  let currGrp;
  let colorMode;
  let hue, dhue;
  let lum, dlum;

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

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

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  function randomElement(array) {
    return array[intAlea(0, array.length)];
  }
  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  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

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

  /* returns intermediate point between p0 and p1,
    alpha = 0 whill preturn p0, alpha = 1 will return p1
    values of alpha outside [0,1] may be used to compute points outside the p0-p1 segment
  */
  function intermediate(p0, p1, alpha) {

    return [(1 - alpha) * p0[0] + alpha * p1[0],
    (1 - alpha) * p0[1] + alpha * p1[1]];
  } // function intermediate

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

  function rotate3(t) {
    let ny = t[0] - t[1] + 1 >> 1;
    return [ny - t[0] - t[1], ny];
  } // rotate 3

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

  function Triangle(kx, ky, color) {

    /* constructor */

    this.color = color ? color : `hsl(${intAlea(360)},100%,50%)`;
    this.kx = kx;
    this.ky = ky;
    this.kxc = kx - hnbx;
    this.kyc = ky - hnby;
    this.setXY(kx, ky);

  }

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

  Triangle.prototype.setXY = function (kx, ky) {

    let xa, ya, vertices, deltay, upsideDown, tw;

    // centre of this triangle (middle of height, not gravity centre)
    ya = maxy / 2 + this.kyc * triHeight;
    xa = maxx / 2 + this.kxc * triWidth / 2;

    vertices = [[], [], []];
    let modTriWidth = triWidth + GAPTRI;

    deltay = modTriWidth * msqrt(3) / 4;
    tw = modTriWidth / 2;
    this.upsideDown = !!(this.kxc + this.kyc & 1);
    if (this.upsideDown) deltay = -deltay;

    vertices[0][0] = xa;
    vertices[0][1] = ya - deltay;

    vertices[1][0] = xa + tw;
    vertices[1][1] = ya + deltay;

    vertices[2][0] = xa - tw;
    vertices[2][1] = ya + deltay;

    this.kx = kx;
    this.ky = ky;
    this.xa = xa;
    this.ya = ya;
    this.xg = xa; // gravity centre
    this.yg = ya + deltay / 3;
    this.vertices = vertices;
  };

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  Triangle.prototype.addGrp = function (cell) {

    if (!this.grp) {
      this.grp = new Group(this);
    }
    cell.grp = this.grp; // cells really share the same group
    this.grp.add(cell);
  };
  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  Triangle.prototype.drawTriangle = function (fill) {

    ctx.beginPath();
    ctx.moveTo(this.vertices[0][0], this.vertices[0][1]);
    ctx.lineTo(this.vertices[1][0], this.vertices[1][1]);
    ctx.lineTo(this.vertices[2][0], this.vertices[2][1]);
    ctx.closePath();

    ctx.fillStyle = fill;
    ctx.fill();
  }; // Triangle.prototype.drawTriangle

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

  function Group(cell) {
    this.cells = new Set([cell]);
    this.unused = true;
    groups.push(this);
  }

  Group.prototype.add = function (otherCell) {
    this.cells.add(otherCell); // does nothing if same cell
  };

  Group.prototype.draw = function (color) {
    this.cells.forE.........完整代码请登录后点击上方下载按钮下载查看