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

canvas实现剖面线三角形效果代码

代码语言：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) {
            .........完整代码请登录后点击上方下载按钮下载查看