perlin-noise黑白噪点动画示例代码-html代码-BFW代码库

perlin-noise黑白噪点动画示例代码

代码语言：html

所属分类：其他

代码描述：perlin-noise黑白噪点动画示例代码

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

<!DOCTYPE html>
<title>Perlin noise</title>
<style>
.centerbox {
  /* flexbox, por favor */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;

  width: 100%;
  height: 100%;
  margin: 0; padding: 0;
}
body, html { width: 100%; height: 100%; padding: 0; margin: 0; }
canvas {
  /* border-radius: 30px;  Border radiuses don't seem to work with putImageData */
  box-shadow: 0 0 10px #777;
  width: 1024px;
  height: 768px;
}
body {
  background-color: #eee;
}
</style>
<div class='centerbox'><canvas></canvas></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/perlin-noise.js"></script>
<script>
var canvas = document.getElementsByTagName('canvas')[0];
canvas.width = 1024;
canvas.height = 768;

var ctx = canvas.getContext('2d');

var image = ctx.createImageData(canvas.width, canvas.height);
var data = image.data;

var height = 0;

var fn = 'simplex'

function drawFrame() {
  var start = Date.now();
  // Cache width and height values for the canvas.
  var cWidth = canvas.width;
  var cHei.........完整代码请登录后点击上方下载按钮下载查看