图片涟漪水波效果-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;
  this.vy = 0;
  this.parentSystem = parentSystem;
  return this;
};
Vertices.prototype.update = function () {
  // apply friction
  this.vx *= this.parentSystem.friction;
  this.vy *= this.parentSystem.friction;

  // stay attached to point
  this.vx += (this.sx - this.x) * this.parentSystem.springForce;
  this.vy += (this.sy - this.y) * this.parentSystem.springForce;

  // avoid the mouse
  let dx = mouseX - this.x;
  let dy = mouseY - this.y;
  let dist = msqrt(dx * dx + dy * dy);
  if (dist < this.parentSystem.mouseRepelDist) {
    let tx = mouseX - this.parentSystem.mouseRepelDist * dx / dist;
    let ty = mouseY - this.parentSystem.mouseRepelDist * dy / dist;
    this.vx += (tx - this.x) * this.parentSystem.mouseForce;
    this.vy += (ty - this.y) * this.parentSystem.mouseForce;
  }

  // update position
  this.x += this.vx;
  this.y += this.vy;
};

const Face = function (vertices, sData) {
  this.vertices = vertices;
  this.sData = sData;
};
Face.prototype.draw = function () {
  ctx.drawImage(imgSrc,
  this.sData.x, this.sData.y, this.sData.w, this.sData.h,
  this.vertices[0].x, this.vertices[0].y,
  this.vertices[1].x - this.vertices[0].x, this.verti.........完整代码请登录后点击上方下载按钮下载查看