格子波浪动画效果-html代码-BFW代码库

格子波浪动画效果

代码语言：html

所属分类：动画

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

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

<title>grid wave 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
      html, body, canvas {
  width: 100%;
  height: 100%;
  overflow: hidden;
  content-zooming: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

body {
  cursor: pointer;
}

    </style>

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

<script>
      let af;
let t = 0;
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const avgNeighbors = (map, ro, co) => {
  let sum = 0;
  let count = 0;
  for (let r = ro - 1; r <= ro + 1; ++r) {
    if (r < 0 || r >= map.length) continue;
    for (let c = co - 1; c <= co + 1; ++c) {
      if (c < 0 || c >= map[0].length) continue;
      sum += map[r][c];
      ++count;
    }
  }
  return sum / count;
};
const smoothMap = oldMap => {
  const newMap = oldMap.slice(0);
  for (let r = 0; r < oldMap.length; ++r) {
    for (let c = 0; c < oldMap[0].length; ++c) {
      const a = avgNeighbors(oldMap, r, c);
      newMap[r][c] = a;
    }
  }
  return newMap;
};
const createMap = (w, h) => {
  let map = new Array(h);
  for (let r = 0; r < h; ++r) {
    map[r] = new Array(w);
    for (let c = 0; c < w; ++c) {
      map[r][c] = Math.random();
    }
  }
  for (let i = 0; i < 5; ++i) map = smoothMap(map);
  let max = map[0][0];
  let min = map[0][0];
  for (let r = 0; r < h; ++r) {
    for (let c = 0; c < w; ++c) {
      max = Math.max(max, map[r][c]);
      min = Math.min(min, map[r][c]);
    }
  }
  return { map, max, min };
};
const project = (x, y, z) => {
  return {
    px: x * (z + 3) / canvas.width * 50 + .........完整代码请登录后点击上方下载按钮下载查看