刺绣背景效果-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 : `hs.........完整代码请登录后点击上方下载按钮下载查看