perlin实现螺旋运动游泳动画效果-html代码-BFW代码库

perlin实现螺旋运动游泳动画效果

代码语言：html

所属分类：动画

代码描述：perlin实现螺旋运动游泳动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
	margin: 0;
}

#content {
	height: 100%;
	position: absolute;
	width: 100%
}
</style>

</head>
<body translate="no">

<div id="content"></div>


<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/perlin-min.js"></script>
<script>
'use strict';

class App {

  constructor(containerId) {

    this.container = document.getElementById(containerId);
    this.canvas = document.createElement('canvas');
    this.context = this.canvas.getContext('2d');
    this.fps = 60;
    this.frame = 0;

    this.container.appendChild(this.canvas);

    this.update();
    this.animate();

  }

  animate() {

    setTimeout(() => {

      this.render();

      requestAnimationFrame(this.animate.bind(this));

    }, 1000 / this.fps);

  }

  render() {

    let
    columns = 200,
    rows = 20,
    cellWidth = (this.width() + 100) / columns,
    cellHeight = this.height() / rows,
    xPos = 0,
    yPos = 0,
    colors = [[0, 174, 239], [236, 0, 140], [255, 242, 0], [0, 0, 0]],
    color = null;

    this.frame += .5;

    this.context.clearRect(0, 0, this.width(), this.height());

    for (let x = 0; x < columns; x++) {

      for (let y = 0; .........完整代码请登录后点击上方下载按钮下载查看