simplex-noise实现canvas波纹波浪布料飘动效果代码-html代码-BFW代码库

simplex-noise实现canvas波纹波浪布料飘动效果代码

代码语言：html

所属分类：动画

代码描述：simplex-noise实现canvas波纹波浪布料飘动效果代码

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


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

<head>

  <meta charset="UTF-8">
  


  
  
<style>
body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

canvas {
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
  background: #fff;
}
</style>



</head>

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

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script>
      <script  >
/*--------------------
Utility
--------------------*/
const lerp = (a, b, n) => (1 - n) * a + n * b;

/*--------------------
Setup
--------------------*/
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let time = 0;
const devicePixelRatio = window.devicePixelRatio || 1;
const w = 400;
const h = 400;
const simplex = new SimplexNoise();
const steps = 100;
const amplitude = 30;
const lines = 30;


/*--------------------
DrawLine
--------------------*/
const drawLine = (startY, t, seed) => {
  const step = w / steps;
  .........完整代码请登录后点击上方下载按钮下载查看