图片涟漪水波效果-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/abstract-biology-black-background-graphic.jpg';
let boris = 'https://upload.wikimedia.org/wikipedia/commons/2/25/Informal_meeting_of_foreign_affairs_ministers_%28Gymnich%29._Round_table_Boris_Johnson_%2836913612672%29_%28cropped%29.jpg';
let water = 'https://cdn.pixabay.com/photo/2015/11/02/18/32/water-1018808_960_720.jpg';

imgURL = jelly;

const ParticleSystem = function () {
  this.friction = .98; // 1 MAX
  this.mouseRepelDist = 50; // Size of repel circle
  this.mouseForce = .02; // Strength of mouse influence
  this.springForce = .2; // speed of return to spring point. Tightness
  this.numParticles = gridSize * gridSize;
  this.particles = [];
  this.faces = [];
};
ParticleSystem.prototype.generate = function () {
  for (let i = 0; i < this.numParticles; i++) {
    this.particles.push(new Vertices(i % gridSize * spacing, Math.floor(i / gridSize) * spacing, this));
  }
};
ParticleSystem.prototype.update = function () {
  for (let i = 0; i < this.numParticles; i++) {
    this.particles[i].update();
  }
};
const Vertices = function (x, y, parentSystem) {
  this.x = x;
  this.y = y;
  this.sx = this.x;
  this.sy = this.y;
  this.vx = 0;.........完整代码请登录后点击上方下载按钮下载查看