圆角三角形背景效果-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 () {

  /* constants to play with */
  const limBiTri = 150;
  const dHue = 40;
  const halfMargin = 3; // px for space between triangles
  const roundRadius = 10;
  /*  halfMargin and roundRadius should be kept positive and small with respect to limBiTri
                            or insconsistency issues may arise */

  /* modifications beyond this line at your own risks */

  let canv, ctx; // canvas and context : global variables (I know :( )
  let maxx, maxy; // canvas sizes (in pixels)
  let hueMono;
  let monochrome;
  let bt0, bt1, bt2;

  let prevTri, currTri;

  // shortcuts for Math.…

  const mrandom = Math.random;
  const mhypot = Math.hypot;
  const matan2 = Math.atan2;
  const mabs = Math.abs;

  //-----------------------------------------------------------------------------
  // 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();
  } // alea

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

  function isPositiveRot(p0, p1, p2) {

    // returns true if turn positively going from p0 to p1 to p2
    let dx0 = p1[0] - p0[0];
    let dy0 = p1[1] - p0[1];
    let dx1 = p2[0] - p1[0];
    let dy1 = p2[1] - p1[1];

    return dx0 * dy1 - dx1 * dy0 >= 0;

  } // isPositiveRot

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

  function projection(p0, p1, p) {
    // returns projection of p on (p0, p1)

    let [x0, y0] = p0;
    let [x1, y1] = p1;
    let [x, y] = p;

    let dx = x1 - x0;
    let dy = y1 - y0;

    let xproj, yproj;

    let det = -dx * dx - dy * dy;

    let c0 = x * dx + y * dy;
    let c1 = x0 * dy - y0 * dx;

    xproj = (-c0 * dx - c1 * dy) / det;
    yproj = (c1 * dx - c0 * dy) / det;

    return [xproj, yproj];
  } // projection


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

  function intersect(p0, p1, p2, p3) {
    /* computes intersection of lines (p0, p1) and (p2, p3)
                                      (even if not in line segments)
                                      returns false if lines are parallel
                                      */

    let [x0, y0] = p0;
    //    let x2 = this.p1.x;
    //    let y2 = this.p1.y;
    let [x2, y2] = p2;
    //    let x4 = autreSegment.p1.x;
    //    let y4 = autreSegment.p1.y;
    let dx0 = p1[0] - p0[0];
    let dy0 = p1[1] - p0[1];

    let dx2 = p3[0] - p2[0];
    let dy2 = p3[1] - p2[1];

    let deter = dy0 * dx2 - dx0 * dy2;
    if (mabs(deter) < 1e-30) return false;

    let xs = x0 * dy0 * dx2 - x2 * dx0 * dy2 + (y2 - y0) * dx0 * dx2;
    xs /= deter;
    // y is computed like x, exchanging x and y (which changes the sign of deter))
    let ys = y0 * dx0 * dy2 - y2 * dy0 * dx2 + (x2 - x0) * dy0 * dy2;
    ys = -ys / deter;

    return [xs, ys];

  } // intersect

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

  function parallelSegment(p0, p1, dist) {

    /* input : two distinct points and a distance
                                           returns a segment parallel to (p0, p1) as two points
                                           this segment is at a distance dist from (p0, p1) on the right side (dist > 0)
                                           or left side (dist < 0) of (p0, p1) (when moving from p0 to p1)
                                           projection of 1st returned point on (p0, p1) is p0;
                                           projection of 2nd returned point on (p0, p1) is p1;
                                          */

    let dx = p1[0] - p0[0];
    let dy = p1[1] - p0[1];

    let lng = mhypot(dx, dy) / dist;

    let dxn = dx / lng;
    let dyn = dy / lng;

    let pp0 = [p0[0] - dyn, p0[1] + dxn];
    let pp1 = [p1[0] - dyn, p1[1] + dxn];

    return [pp0, pp1];

  } // parallelSegment


  //-----------------------------------------------------------------------------
  /* splittable, oriented segment */

  function Side(p0, p1) {
    this.p0 = p0;
    this.p1 = p1;
    this.length = mhypot(p1[0] - p0[0], p1[1] - p0[1]);
  } // Side

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

  Side.prototype.split = function () {

    let coeff = alea(0.5 - 0.1, 0.5 + 0.1);
    let nCoeff = 1 - coeff;
    let pm = [nCoeff * this.p0[0] + coeff * this.p1[0],
    nCoeff * this.p0[1] + coeff * this.p1[1]];
    this.head = new Side(this.p0, pm);
    this.tail = new Side(pm, this.p1);

  }; //

  //-----------------------------------------------------------------------------
  function BiTri(side0, side1, side2, reverse0, reverse1, reverse2, enforce) {

    /* parameter used to enforce division beyond limBiTri on mousemove */

    let tris = [];

    this.side0 = side0;
    this.side1 = side1;
    this.side2 = side2;
    this.reverse0 = reverse0;
    this.reverse1 = reverse1;
    this.reverse2 = reverse2;

    if (!enforce) {
      if (side0.length < limBiTri) return;
      if (side1.length < limBiTri) return;
      if (side2.length < limBiTri) return;
    }

    // put all elements in tri, with longest side in the middle

    if (side0.length > side1.length) {
      if (side0.length > side2.length) {// side 0 longest
        tris = [side2, side0, side1, reverse2, reverse0, reverse1];
      } else {// side 2 longest
        tris = [side1, side2, side0, reverse1, reverse2, reverse0];
      }
    } else {
      if (side2.length > side1.length) {// side 2 longest
        tris = [side1, side2, side0, reverse1, reverse2, reverse0];
      } else {// side1 longest
        tris = [side0, side1, side2, reverse0, reverse1, reverse2];
      }
    }

    if (!tris[1].head) tris[1].split(); // split longest side if needed

    let ns0 = this.ns0 = new Side(tris[3] ? tris[0].p1 : tris[0].p0,
    tris[1].head.p1);

    // split main triangle into 2 smaller ones

    this.t0 = new BiTri(tris[0],
    tris[4] ? tris[1].tail : tris[1].head,
    ns0,
    tris[3],
    tris[4],
    true);

    this.t1 = new BiTri(ns0,
    tris[4] ? tris[1].he.........完整代码请登录后点击上方下载按钮下载查看