canvas方块渐变显示效果-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";

/* cubes25 is tiresome because animation never stops.
              I make a new version which rests for a few seconds when all polygons have been drawn,
              and then begins back with same drawing but different colors
              */

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

  const nbpF = 100; // number of loops per frame
  const pauseDuration = 3000; // in milliseconds

  let monochrome = true;
  let angle0 = 0 / 180 * Math.PI;
  let angle1 = 120 / 180 * Math.PI;
  let lSide0 = 40;
  let lSide1 = 40;
  let xSide0 = lSide0 * Math.cos(angle0);
  let ySide0 = lSide0 * Math.sin(angle0);
  let xSide1 = lSide1 * Math.cos(angle1);
  let ySide1 = lSide1 * Math.sin(angle1);

  let canv, ctx; // canvas and context : global variables (I know :( )
  let maxx, maxy; // canvas sizes (in pixels)
  let offs0, offs1;
  let grid; // array of parallelograms
  let gridMin, gridMax;
  let tbLoops; // array of polygons
  let tbPolys; // array of orthogonified polygons

  // for animation
  let click;
  let idAnim;
  let prevTStamp; // for frame duration measurement
  let lDiag;
  let dShrink; // variation of shrink at every step
  let anims, animsOn, idxAnim, topPause;
  let globHue = 0;

  /*	============================================================================
                   	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
                   	============================================================================
                   */
  /*
                      function Mash() {
                      	var n = 0xefc8249d;
                      	var mash = function(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;
                      	};
                        return mash;
                      }
                      
                        const mrandom = (function () {
                          let mash = Mash(); return () => mash(1);
                        })();// Math.random;
                      */
  // 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;

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

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  /* returns intermediate point between p0 and p1,
    alpha = 0 will return 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 distance(p0, p1) {

    /* distance between points */

    return mhypot(p0[0] - p1[0], p0[1] - p1[1]);

  } // function distance

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

  function randomElement(array) {
    return array[intAlea(array.length)];
  } // randomElement

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

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

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  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 clonePoint(p) {
    return [p[0], p[1]];
  }

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

  function screenCoordinates(p) {

    let xecr = (p[0] + offs0) * xSide0 + (p[1] + offs1).........完整代码请登录后点击上方下载按钮下载查看