canvas实现有形状的perlin噪波纹理动画效果代码

代码语言:html

所属分类:动画

代码描述:canvas实现有形状的perlin噪波纹理动画效果代码

代码标签: canvas 形状 perlin 噪波 纹理 动画

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
*{
  padding:0;
  margin:0;
  boz-sizing:border-box;
}

#canvas{
  background:#021636;


}
</style>




</head>

<body>
  <canvas id="canvas"></canvas>

  
      <script>
/*
 * A speed-improved perlin and simplex noise algorithms for 2D.
 *
 * Based on example code by Stefan Gustavson (stegu@itn.liu.se).
 * Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
 * Better rank ordering method by Stefan Gustavson in 2012.
 * Converted to Javascript by Joseph Gentle.
 *
 * Version 2012-03-09
 *
 * This code was placed in the public domain by its original author,
 * Stefan Gustavson. You may use it as you see fit, but
 * attribution is appreciated.
 *
 */

(function (global) {
  var module = global.noise = {};

  function Grad(x, y, z) {
    this.x = x;this.y = y;this.z = z;
  }

  Grad.prototype.dot2 = function (x, y) {
    return this.x * x + this.y * y;
  };

  Grad.prototype.dot3 = function (x, y, z) {
    return this.x * x + this.y * y + this.z * z;
  };

  var grad3 = [new Grad(1, 1, 0), new Grad(-1, 1, 0), new Grad(1, -1, 0), new G.........完整代码请登录后点击上方下载按钮下载查看

网友评论0