canvas方块渐变显示效果-html代码-BFW代码库

canvas方块渐变显示效果

代码语言：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;

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