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";

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

  let canv, ctx;   // canvas and context : global variables (I know :( )
  let maxx, maxy;  // canvas sizes (in pixels)
  let orgx, orgy;  // position of the top left corner
  let nbx, nby;
  let bgColor;
  let rndGen, rndCol;
  let squarel;
  let fibrous;
// 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
//-----------------------------------------------------------------------------

/* based on a function found at https://www.grc.com/otg/uheprng.htm
and customized to my needs

use :
  x = Mash('1213'); // returns a resettable, reproductible pseudo-random number generator function
  x = Mash();  // like line above, but uses Math.random() for a seed
  x();         // returns pseudo-random number in range [0..1[;
  x.reset();   // re-initializes the sequence with the same seed. Even if Mash was invoked without seed, will generate the same sequence.
  x.seed;      // retrieves the internal seed actually used. May be useful if no seed or non-string seed provided to Mash
               be careful : this internal seed is a String, even if it may look like a number. Changing or omitting any single digit will produce a completely different sequence
  x.intAlea(min, max) returns integer in the range [min..max[ (or [0..min[ if max not provided)
  x.alea(min, max) returns float in the range [min..max[ (or [0..min[ if max not provided)
*/

/*	============================================================================
	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
	============================================================================
*/
/* seed may be almost anything, if will be converted to String */

function Mash(seed) {
	let n = 0xefc8249d;
  if (typeof seed == 'undefined') seed = Math.random();
  if (typeof seed != 'string') seed = seed.toString();
  let intSeed = seed;

	function mash (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;
	};
  mash (intSeed); // initial value based on seed

  let mmash = () => mash('A'); // could as well be 'B' or '!' or any non falsy value
  mmash.reset = () => {mash(); mash(intSeed)}
  Object.defineProperty(mmash, 'seed', {get: ()=> intSeed});
  mmash.intAlea = function (min, max) {
    if (typeof max == 'undefined') {
      max = min; min = 0;
    }
    return mfloor(min + (max - min) * this());
  }
  mmash.alea = function (min, max) {
// random number [min..max[ . If no max is provided, [0..min[

    if (typeof max == 'undefined') return min * this();
    return min + (max - min) * this();
  }

  return mmash;
} // Mash

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

let noise = (function () {
/* returns value in range -1..1 */

  function noise1(x) {   // returns -1..1
    return (Mash(x)() - 0.5) * 2 ;
  }  // noise1

  return function(x) {
    let pe = Math.floor(x);
    let pf = x - pe;  
    let pfl = pf * pf * (3 - 2 * pf);
    let v0 = noise1(pe);
    let v1 = noise1(pe + 1);
    let pv0 = - pf * v0;
    let pv1 = (1 - pf) * v1;
    return 2 * (pv0 * (1-pfl) + pv1 * pfl)
  }
})(); // noise

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  function distance (p0, p1) {

/* distance between points */

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

  } // function distance

//-----------------------------------------------------------------------------
function paintSquare (x0, y0, squarel, hue, angle) {

  let s, c;
  let xa, ya, xb, yb, dx, dy, deltax, deltay, x, y;

  let sfreq = rndCol.alea(10,20);
  let soffs = rndCol.alea(100);
  let lfreq = rndCol.alea(10,20);
  let loffs = rndCol.alea(1000, 2000);

  let dist = 2;
  angle = angle % m2PI;
  if (angle < 0) angle += m2PI;
  if (angle > mPI) angle -= mPI;
  s = msin(angle);
  c = mcos(angle);

  if (angle < mPI / 4) {
    deltay = s / c * squarel;
    ya = y0 - deltay;
    yb = y0 + squarel;
    dy = dist / c ;
  } else if (angle < mPIS2) {
    deltax = c / s * squarel;
    xa = x0 - deltax;
    xb = x0 + squarel;
    dx = dist / s;
  } else if (angle < 3 * mPI/4) {
    deltax = c / s * squarel;
    xa = x0;
    xb = x0 + squarel - deltax ;
    dx = dist / s;
  } else {
    deltay = s / c * squarel;
    ya = y0;
    yb = y0 + squarel - deltay;
    dy = - dist / c;
  }

  ctx.beginPath();
  ctx.rect (x0, .........完整代码请登录后点击上方下载按钮下载查看