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;
}
canvas {
  cursor: pointer;
}
</style>




</head>

<body translate="no" >
  <!-- click to draw a new pattern -->

  
  
      <script>
"use strict";

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

  //  const BARWIDTH = 5; // Width of bars
  const MARGIN = 1; // distance between adjacent bars
  //  const GRIDSTEP = BARWIDTH + MARGIN;
  const MINWIDTH = 5; // for BARWIDTH
  const MAXWIDTH = 50;

  let BARWIDTH, GRIDSTEP;

  let canv, ctx; // canvas and context 
  let maxx, maxy; // canvas sizes (in pixels)

  let nbx, nby, posX, posY;
  let grid, bars;
  let colorMode = 0,globalHue;
  let firstRun = true;

  // 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 m2PI = Math.PI * 2;
  const msin = Math.sin;
  const mcos = Math.cos;
  const matan2 = Math.atan2;
  const mtan = Math.tan;

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

  const rac3 = msqrt(3);
  const rac3s2 = rac3 / 2;
  const mPIS3 = Math.PI / 3;

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


  //------------------------------------------------------------------------
  function Bar(kx, ky, size, vertical) {
    this.kx = kx;
    this.ky = ky;
    this.size = size; // distance between ends. this bar occupies size + 1 cells
    this.vertical = vertical;
    this.hue = intAlea(360);
    this.lum = this.vertical ? alea(0.75, 1.0) : alea(0.60, 0.85); // Horizontal darker. Why not ?
  } // function Bar

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

  Bar.prototype.draw = function () {

    let x0, y0, x1, y1;
    let hue = colorMode ? this.hue : (globalHue + intAlea(30)) % 360;

    let lum = colorMode ? 1 : this.lum;
    let sat = intAlea(60, 100);

    x0 = posX[this.kx];
    y0 = posY[this.ky];
    if (this.vertical) {
      x1 = x0;
      y1 = y0 + this.size * GRIDSTEP;
    } else {
      y1 = y0;
      x1 = x0 + this.size * GRIDSTEP;
    }
    for (let width = BARWIDTH; width >= 1; width -= 2) {
      ctx.lineWidth = width;
      ctx.strokeStyle = `hsl(${hue},${sat}%,${(80 - 50 * width / BARWIDTH) * lum}%`;
      ctx.beginPath();
      ctx.moveTo(x0, y0);
      ctx.lineTo(x1, y1);
      ctx.stroke();
    } // for width

  }; // Bar.prototype.draw

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  Bar.prototype.assignGrid = function () {
    if (this.vertical) {
      for (let ky = 0; ky <= this.size; ++ky) {
        grid[this.ky + ky][this.kx].bar = this;
      }
    } else {
      for (let kx = 0; kx <= this.size; ++kx) {
        grid[this.ky][this.kx + kx].bar = this;
      }
    }
  }; // Bar.prototype.assignGrid

  //-----------------------------------------------------------------------------
  function drawBars() {
    bars.forEach(bar => bar.draw());
  } // drawBars

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

  function addABar() {

    let nb;

    tries:
    for (let nbTries = 0; nbTries < 5; ++nbTries) {
      let vertical = mrandom() > nbx / (nbx + nby);
      if (vertical) {
        let px = intAlea(nbx);
        let size = intAlea(1, mmin(15, mfloor(nby / 3)));
        let py = intAlea(nby - 1 - size);
        for (let ky = 0; ky <= size; ++ky) {
          if (grid[py + ky][px].bar) continue tries;
        }
        // accepted ! reserve cells in grid and create Bar
        nb = new Bar(px, py, size, true);
        nb.assignGrid();
        return nb;

      } else {// horizontal
        let py = intAlea(nby);
        let size = intAlea(1, mmin(15, mfloor(nbx / 3)));
        let px = intAlea(nbx - 1 - size);
        for (let kx = 0; kx <= size; ++kx) {
          if (grid[py][px + kx].bar) continue tries;
        }
        // accepted ! reserve cells in grid and create Bar
        nb = new Bar(px, py, size, false);
        nb.assignGrid();
        return nb;
      }
    } // for nbTries
    return false; // did not succeed
  } // addABar

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

  function createGrid() {

    let kkx, kky; // list of lengthenings to try
    let possib;
    let choice, nb, kbest;
    let holeLengthH, holeLengthV;

    grid = [];
    for (let ky = 0; ky < nby; ++ky).........完整代码请登录后点击上方下载按钮下载查看