canvas实现三元花绽放动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：canvas实现三元花绽放动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<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 () {

  const NBCOLORS = 3; // integer, >= 1

  let lRef;
  let initSpeed, rMax;

  let canv, ctx; // canvas and context : global variables (I know :( )
  let maxx, maxy; // canvas sizes (in pixels)
  let particles;
  let click;
  let hues, angle0;
  let org;
  // 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;

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

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

  function intAlea(min, max) {
    // random integer number [min..max[ . If no max is provided, [0..min[

    if (typeof max == 'undefined') {
      max = min;min = 0;
    }
    return mfloor(min + (max - min) * mrandom());
  } // intAlea

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  function NoiseGen(rndFunc, period, nbHarmonics, attenHarmonics, lowValue = 0, highValue = 1) {

    /* this function returns a function which can be used as a noise generator
       the returned functions takes no parameter : it is supposed to be called for
       consecutive, evenly spaced points of time or space.
    - rndFunc is the random generator function used. It must return a value in the range
    [0..1[. If a falsy value is provided (0, false, null, undefined..) Math.random will be used.
    - period determines the speed of variation of the returned value. The higher
    period is, the slowlier the value will change in the noise signal. It must be
    a positive, non zero value (typically a few hundreds).
    - nbHarmonics is an integer giving the number of harmonics used to generate the signal.
    With 0 or 1, a single, smooth signal will be generated
    With 2 or more, internally generated signals of periods up to period / 2, period / 3, will be added.
    nbHarmonics should be kept as low as possible, since every added harmonic increases the
    computation time significantly.
    - attenHarmonics is a float number which should stay in the interval 0..1.
    During harmonics generation, the amplitude of the signal is multiplied by
    attenHarmonics, with respect to the immediatly lower level harmonic.
    attenHarmonics = 0 results in no harmonics at all. attenHarmonics > 1 results in
    harmonics greater than the fundamental, whith the highest harmonics beeing the
    most important. This is not usually the desired behaviour.
    lowValue and highValue are optional floating values. Despite the names, it
    it is not required that highValue > lowValue. The
    returned value will be scaled to the range lowValue..highValue
    (without strict warranty about the limits beeing reached or exceeded, due to
    the finite precision of floating numbers)
    
    */

    let arP0 = []; // 'preceeding value' for each harmonic
    let arP1 = []; // 'succeding value'
    let amplitudes = []; // amplitudes oh harmonics
    let increments = []; // n / period, wich will be added to phases for every point
    let phases = [];
    let globAmplitude = 0;
    if (!rndFunc) rndFunc = Math.random; // default value for rndFunc
    if (nbHarmonics < 1) nbHarmonics = 1;

    for (let kh = 1; kh <= nbHarmonics; ++kh) {
      arP0[kh] = rndFunc();
      arP1[kh] = rndFunc();
      amplitudes[kh] = kh == 1 ? 1 : amplitudes[kh - 1] * attenHarmonics;
      globAmplitude += amplitudes[kh];
      increments[kh] = kh / period;
      phases[kh] = rndFunc();
    } // for kh

    /* normalize amplitudes */
    amplitudes.forEach((value, kh) => amplitudes[kh] = value / globAmplitude * (highValue - lowValue));

    /* returned function here */
    return function () {
      let pf, pfl;
      let signal = 0;
      for (let kh = nbHarmonics; kh >= 1; --kh) {
        pf = phases[kh] += increments[kh];
        if (phases[kh] >= 1) {
          pf = phases[kh] -= 1;
          arP0[kh] = arP1[kh];
          arP1[kh] = rndFunc();
        } // if full period reached
        pfl = pf * pf * (3 - 2 * pf); // always 0..1, but smoother
        signal += (arP0[kh] * (1 - pfl) + .........完整代码请登录后点击上方下载按钮下载查看