圆角三角形背景效果-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];

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