随机背景图案效果-html代码-BFW代码库

随机背景图案效果

代码语言：html

所属分类：背景

代码描述：通过正方形圆形五角星等效果实现背景布局效果

代码标签：效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background: #333;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

</head>
<body translate="no">

<script>
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;} // CodePen Challenge
// Generative Patterns
//
// 1 Create a grid with random points
// 2 if those points are large enough check quad family
// 3 branch in up to 4 directions
// 4 do stuff and check again
// 
// Click to change



// Parent Render Class
class Render {
  constructor() {_defineProperty(this, "setViewport",















    element => {
      const canvasElement = element;
      const dc = document.documentElement;
      this.width = ~~(dc.clientWidth, window.innerWidth || 0);
      this.height = ~~(dc.clientHeight, window.innerHeight || 0);
      canvasElement.width = this.width;
      canvasElement.height = this.height;
    });_defineProperty(this, "createCanvas",

    name => {
      const canvasElement = document.createElement('canvas');
      canvasElement.id = name;
      this.setViewport(canvasElement);
      document.body.appendChild(canvasElement);
      this.surface = canvasElement.getContext('2d');
      this.surface.scale(1, 1);
      return canvasElement;
    });_defineProperty(this, "resetCanvas",

    () => {
      window.cancelAnimationFrame(this.animation);
      this.setViewport(this.canvas);
      this.grid = 10 + Math.random() * 35;
      this.bsize = this.grid * .85;
      this.baseHue = Math.random() * 255;
      this.cols = ~~(this.width / this.grid);
      this.rows = ~~(this.height / this.grid);
      this.points = [];
      this.generateCubics();
      this.renderLoop();
    });_defineProperty(this, "generateCubics",

    () => {
      this.setBackground();
      for (let y = 0; y < this.rows; y++) {
        for (let x = 0; x < this.cols; x++) {
          const bsize = this.bsize + Math.random() * 5;
          const config = {
            life: 10 + Math.random() * 10,
            type: 1,
            id: x + y * this.cols,
            x: this.bsize / 4 + this.grid / 2 + x * this.grid,
            y: this.bsize / 4 + this.grid / 2 + y * this.grid,
            size: Math.random() * 255 > 240 ? bsize : false,
            hue: this.baseHue + 10 + (25 - Math.random() * 50) };

          this.points.push(config);
        }
      }
      this.formatQuads();
      this.drawFrame();
    });_defineProperty(this, "formatQuads",

    () => {
      for (let i = 0; i < this.points.length; i++) {
        const point = this.points[i];
        if (point.size > this.bsize) {
          this.checkQuads(point);
        }
      }
    });_defineProperty(this, "checkQuads",

    point => {
      const { id, size, type, life, hue } = point;
      const x = id % this.cols;
      const y = ~~((id - x) / this.rows);
      const ct = y - 1 < 0 ? false : id - this.cols;
      const cb = y + 1 > this.rows ? false : id + this.cols;
      const cl = x - 1 < 0 ? false : id - 1;
      const cr = x + 1 > this.cols ? false : id + 1;
      const ctg = [cb, ct, cr, cl];

      ctg.map(pip => {
        if (pip > 0) {
          if (Math.random() * 255 > 110 && this.points[pip]) {
            const pt = this.points[pip];
            const size = point.size * .65;
            if (life > 0 && pt.size < size) {
              pt.size = size < 0 ? 0 : size;
              pt.type = type + 1;
              pt.life = life - 1;
              pt.hue = hue + 10;

              this.checkQuads(pt);
            }
          }
        }
      });
    });_defineProperty(this, "setBackground",

    () => {
      this.baseHue = Math.random() * 255;
      const fillHue = `hsla(${this.baseHue},50%,20%,1)`;
      t.........完整代码请登录后点击上方下载按钮下载查看