图片涟漪水波效果-html代码-BFW代码库

图片涟漪水波效果

代码语言：html

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


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

<title> Liquid image</title>
<style>
    body {
  background: #000500;
  color: whitesmoke;
  font-family: sans-serif;
  text-align: center;
}

canvas {
  cursor: pointer;
  display: block;
  margin: 0 auto 10px;
}

button {
  cursor: pointer;
  padding: 5px 15px;
}

  </style>

</head>
<body translate="no">
<p>用鼠标或手指拖动</p>
<div class="wrapper"></div>
<button class="grid">Toggle grid</button>
<button class="jelly">Jellyfish</button>
<button class="water">Water</button>
<button class="boris">Boris</button>

<script >
      let canvas,
ctx,
system,
gridSize = 40,
spacing = 10,
width = height = (gridSize - 1) * spacing,
mouseX = 262, // Positioning mouse values so they affect good portion of image at start :)
mouseY = 182,
imgSrc = new Image(),
imgURL,
drawVertices = false,
first = true;
const msqrt = Math.sqrt;

let jelly = 'https://i0.nicepik.com/files/294/1007/621.........完整代码请登录后点击上方下载按钮下载查看