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;
}
</style>

  
  
  
</head>

<body >

  
      <script  >
"use strict";

window.addEventListener("load", function () {
  let canv, ctx; // canvas and context
  //            let maxx, maxy;   // canvas dimensions
  let tr;
  let maxx, maxy;
  let hue, gr, gr2;
  let ended;
  // for animation
  let messages;

  // 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 mPIS3 = Math.PI / 3;
  const m2PI = Math.PI * 2;
  const m2PIS3 = Math.PI * 2 / 3;
  const msin = Math.sin;
  const mcos = Math.cos;
  const matan2 = Math.atan2;

  const mhypot = Math.hypot;
  const msqrt = Math.sqrt;

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

  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 lerp(p0, p1, alpha) {
    const uma = 1 - alpha;
    return {
      x: uma * p0.x + alpha * p1.x,
      y: uma * p0.y + alpha * p1.y };

  }
  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  function cutQ(quadra, alpha) {
    // cut quadratic
    /* quadra is a set of 3 points definining a quadratic Bézier curve
        this function returns a set of 2 quadratic curves (sets of 3 points) repsenting a division of the 2 initial curves,
        cut at an intermediate point defined by alpha (0..1)
        the two sub-arcs share a common point, and re-use copies of quadra
        caution : alpha is not a length ratio, it is only the value of the t variable of the parametric equation of the curve
        */
    const pa = lerp(quadra[0], quadra[1], alpha);
    const pb = lerp(quadra[1], quadra[2], alpha);
    const pc = lerp(pa, pb, alpha);
    return [
    [quadra[0], pa, pc],
    [pc, pb, quadra[2]]];

  } // cutQ
  //------------------------------------------------------------------------
  //------------------------------------------------------------------------

  function generatePoints(t) {
    return t.points.map(p => ({ x: p.x, y: p.y })); // shallow copy
  } // generate points

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

  class SortedArray {
    /* creates a sorted array of any kind of things, by intersting them into an initially empty array
           the comparison function used for sorting is given to the constructor
           Things are inserted using .insert method
           sorted array is in the .tb prop.........完整代码请登录后点击上方下载按钮下载查看