canvas波纹波动效果-html代码-BFW代码库

canvas波纹波动效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  background: #eef1ff;
  background: linear-gradient(45deg, #eef1ff 0%, #d2dcff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eef1ff', endColorstr='#d2dcff',GradientType=1 );
}

canvas {
  display: block;
}
</style>

</head>
<body translate="no">
<canvas></canvas>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>

<script >
const gui = new dat.GUI(),
guiSet = {
  frequency: 10,
  reset: () => {
    $.reset();
  } };


gui.add(guiSet, 'frequency').min(10).max(50);
gui.add(guiSet, 'reset');

const $ = {};

/*========================================
              Initialize
              ========================================*/

$.init = () => {
  $.c = document.querySelector('canvas');
  $.ctx = $.c.getContext('2d');
  $.simplex = new SimplexNoise();
  $.events();
  $.reset();
  $.loop();
};

/*========================================
   Reset
   ========================================*/

$.reset = () => {
  $.w = window.innerWidth;
  $.h = window.innerHeight;
  $.cx = $.w / 2;
  $.cy = $.h / 2;
  $.c.width = $.w;
  $.c.height = $.h;
  $.count = Math.floor($.w / guiSet.frequency); // Wave frequency
  $.xoff = 0;
  $.xinc = 0.05;
  $.yoff = 0;
  $.yinc = 0.01; // Speed
  $.goff = 0;
  $.ginc = 0;
  $.y = $.h * 0.65;
  $.length = $.w + 0;
  $.amp = 15; // Wave height
};

/*========================================
   Event
   ========================================*/

$.events = () => {
  window.addEventLis.........完整代码请登录后点击上方下载按钮下载查看