粒子波纹波动穿越效果-html代码-BFW代码库

粒子波纹波动穿越效果

代码语言：html

所属分类：粒子

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

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

<style>
canvas {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
</style>

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

<script>
/**
 * 3D Software ocean effect with Canvas2D
 * You can change properties under comment "Effect properties"
 */

// Init Context
let c = document.createElement('canvas').getContext('2d');
let postctx = document.body.appendChild(document.createElement('canvas')).getContext('2d');
let canvas = c.canvas;
let vertices = [];

// Effect Properties
let vertexCount = 7000;
let vertexSize = 3;
let oceanWidth = 204;
let oceanHeight = -80;
let gridSize = 32;
let waveSize = 16;
let perspective = 100;

// Common variables
let depth = vertexCount / oceanWidth * gridSize;
let frame = 0;
let { sin, cos, tan, PI } = Math;

// Render loop
let loop = () => {
  let rad = sin(frame / 100) * PI / 20;
  let rad2 = sin(frame / 50) * PI / 10;
  frame++;
  if (postctx.canvas.width !== postctx.canvas.offsetWidth || postctx.canvas.height !== postctx.canvas.offsetHeight) {
    postctx.canvas.width = canvas.width = postctx.canvas.offsetWidth;
    postctx.canvas.height = canvas.height = postctx.canvas.offsetHeight;
  }


  c.fillStyle = `hsl(200deg, 100%, 2%)`;
  c.fillRect(0, 0, canvas.width, canvas.height);
  c.save();
  c.translate(canvas.width / 2, canvas.height / 2);

  c.beginPath();
  vertices.forEach((vertex, i) => {
    let ni = i + oceanWidth;
    let x = vertex[0] - frame % (gridSize * 2);
    let z = vertex[2] - frame * 2 % gridSize + (i % 2 === 0 ? gridSize .........完整代码请登录后点击上方下载按钮下载查看