js实现canvas多彩毛发生长动画效果代码-html代码-BFW代码库

js实现canvas多彩毛发生长动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas多彩毛发生长动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body, html {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #000;
}
</style>



</head>

<body >
  

  
      <script  >
"use strict";
{
  // http://mrl.nyu.edu/~perlin/noise/
  class Noise {
    constructor(octaves = 1) {
      this.p = new Uint8Array(512);
      this.octaves = octaves;
      this.init();
    }
    init() {
      for (let i = 0; i < 512; ++i) {
        this.p[i] = Math.random() * 256;
      }
    }
    lerp(t, a, b) {
      return a + t * (b - a);
    }
    grad2d(i, x, y) {
      const v = (i & 1) === 0 ? x : y;
      return (i & 2) === 0 ? -v : v;
    }
    noise2d(x2d, y2d) {
      const X = Math.floor(x2d) & 255;
      const Y = Math.floor(y2d) & 255;
      const x = x2d - Math.floor(x2d);
      const y = y2d - Math.floor(y2d);
      const fx = (3 - 2 * x) * x * x;
      const fy = (3 - 2 * y) * y * y;
      const p0 = this.p[X] + Y;
      const p1 = this.p[X + 1] + Y;
      return this.lerp(
      fy,
      this.lerp(
      fx,
      this.grad2d(this.p[p0], x, y),
      this.grad2d(this.p[p1], x - 1, y)),

      this.lerp(
      fx,
      this.grad2d(this.p[p0 + 1], x, y - 1),
      this.grad2d(this.p[p1 + 1], x - 1, y - 1)));


    }
    noise(x, y) {
      let e = 1,
      k = 1,
      s = 0;
      for (let i = 0; i < this.octaves; ++i) {
     .........完整代码请登录后点击上方下载按钮下载查看