canvas实现剖面线三角形效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：canvas实现剖面线三角形效果代码，点击可产生新的图案。

下面为部分代码预览，完整代码请点击下载或在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;
        }
        
        #explain {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 10px;
          background-color: rgba(255, 255, 255, 0.9);
          border: 1px solid black;
          border-radius: 10px;
          padding: 10px;
          color: black;
          z-index: 1;
        }
        
        .hidden {
          display: none;
        }
        
        #explain p.buttline {
          text-align: center;
        }
    </style>

 

</head>

<body >
    <div id=explain>
        <div id="txtexplain"></div>
        <p class=buttline><button type="button" id="butt2">next &gt;&gt;</button> <button type="button" id="butt3">skip it
      all</button></p>
    </div>
 


    <script>
        "use strict";
        
        window.addEventListener("load", function () {
          let triWidth, triHeight; // length of triangle side and altitude
          let firstRun = !location.pathname.includes("/fullcpgrid/");
          let canv, ctx; // canvas and context
        
          let maxx, maxy, lRef; // canvas dimensions (lRef is average)
        
          let grid;
          let nbx, nby;
          let hnbx, hnby; // number of triangles in the half of the width, height of the canvas
          let blocks, nbLines;
          let events;
        
          // 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;
        
          //------------------------------------------------------------------------
        
          function alea(mini, maxi) {
            // random number in given range
        
            if (typeof maxi == "undefined") return mini * mrandom(); // range 0..mini
        
            return mini + mrandom() * (maxi - mini); // range mini..maxi
          }
          // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          function intAlea(mini, maxi) {
            // random integer in given range (mini..maxi - 1 or 0..mini - 1)
            //
            if (typeof maxi == "undefined") return mfloor(mini * mrandom()); // range 0..mini - 1
            return mini + mfloor(mrandom() * (maxi - mini)); // range mini .. maxi - 1
          }
        
          // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          function arrayShuffle(array) {
            /* randomly changes the order of items in an array
                   only the order is modified, not the elements
                */
            let k1, temp;
            for (let k = array.length - 1; k >= 1; --k) {
              k1 = intAlea(0, k + 1);
              temp = array[k];
              array[k] = array[k1];
              array[k1] = temp;
            } // for k
            return array;
          } // arrayShuffle
        
          // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        
          /* returns lerp point between p0 and p1,
                alpha = 0 will return p0, alpha = 1 will return p1
                values of alpha outside [0,1] may be used to compute points outside the p0-p1 segment
              */
          function lerp(p0, p1, alpha) {
            return {
              x: (1 - alpha) * p0.x + alpha * p1.x,
              y: (1 - alpha) * p0.y + alpha * p1.y };
        
          } // function lerp
        
          //------------------------------------------------------------------------
        
          function addP(text) {
            let p = document.createElement("p");
            p.append(text);
            txtexplain.append(p);
          }
        
          //------------------------------------------------------------------------
          class Triangle {
            /* numbering of vertices / edges
                       0                        2---1---1
                     / \                        \     /
                    2   0                        2   0
                   /     \                        \ /
                  2---1---1                        0
            */
        
        
            constructor(kx, ky) {
              this.kx = kx;
              this.ky = ky;
              this.kxc = kx - hnbx;
              this.kyc = ky - hnby;
              this.upsideDown = this.kxc + this.kyc & 1; // 0 or 1
              this.setXY();
            }
        
            // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        
            setXY() {
              let xa, ya, vertices, deltay, upsideDown;
        
              // centre of this triangle (middle of height, not gravity centre)
              this.ya = ya = maxy / 2 + this.kyc * triHeig.........完整代码请登录后点击上方下载按钮下载查看