在現(xiàn)代Web應用中，動態(tài)效果和交互性已經(jīng)成為了不可或缺的元素。在這篇博客中，我們將使用JavaScript創(chuàng)建一個液體流動效果，并添加鼠標交互功能，讓用戶能夠與頁面進行互動。

創(chuàng)建畫布和粒子
首先，我們需要創(chuàng)建一個畫布元素，用于繪制我們的液體流動效果。在HTML中添加以下代碼：

<canvas id="canvas"></canvas>
接著，在JavaScript中獲取該元素，并設置其大小與瀏覽器窗口相同：

const canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

接下來，我們需要創(chuàng)建液體粒子。在本例中，我們將使用一個Particle類來表示每個粒子。在類中，我們需要定義粒子的位置、大小、顏色和速度等屬性。在這里，我們將定義隨機速度和加速度，以使每個粒子的運動軌跡都不同。以下是Particle類的示例代碼：

class Particle {
  constructor(x, y, size, color) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.color = color;
    this.vx = Math.random() * 2 - 1;
    this.vy = Math.random() * 2 - 1;
    this.ax = 0;
    this.ay = 0;
  }

  update() {
    this.vx += this.ax;
    this.vy += this.ay;
    this.x += this.vx;
    this.y += this.vy;
  }

  draw(ctx) {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
    ctx.fill();
  }
}

接下來，我們需要創(chuàng)建一些粒子，并將它們存儲在數(shù)組中。在本例中，我們將創(chuàng)建200個粒子，并將它們分布在畫布的隨機位置上。以下是示例代碼：

const numParticles = 200;
const particles = [];

for (let i = 0; i < numParticles; i++) {
  const x = Math.random() * canvas.width;
  const y = Math.random() * canvas.height;
  const size = Math.random() * 10 + 5;
  const particleColor = `rgba(255, 255, 255, ${Math.random()})`;
  particles.push(new Particle(x, y, size, particleColor));
}

現(xiàn)在，我們已經(jīng)創(chuàng)建了畫布和粒子，并將它們存儲在數(shù)組中。接下來，我們需要繪制它們。

繪制液體
在本例中，我們將使用canvas的漸變功能來繪制液體。我們將定義兩種顏色，以在液體的頂部和底部之間創(chuàng)建漸變。以下是繪制液體的函數(shù)：

function drawLiquid() {
  const liquidWidth = canvas.width;
  const liquidHeight = 200;
  const liquidBottom = canvas.height - liquidHeight;
  const liquidColor1 = '#0A2463';
  const liquidColor2 = '#C0C0C0';

  const liquidGradient = ctx.createLinearGradient(0, liquidBottom, 0, canvas.height);
  liquidGradient.addColorStop(0, liquidColor1);
  liquidGradient.addColorStop(1, liquidColor2);

  ctx.fillStyle = liquidGradient;
  ctx.fillRect(0, liquidBottom, liquidWidth, liquidHeight);
}

在這里，我們定義了液體的寬度、高度和顏色，并使用createLinearGradient()方法創(chuàng)建了一個垂直漸變。最后，我們使用fillRect()方法繪制了液體矩形。

繪制粒子
現(xiàn)在，我們已經(jīng)繪制了液體，接下來我們需要繪制粒子。我們將使用Particle類中定義的draw()方法來繪制每個粒子。以下是繪制粒子的函數(shù)：

function drawParticles() {
particles.forEach((particle) => {
particle.update();
particle.draw(ctx);
});
}

在這里，我們遍歷粒子數(shù)組，并調(diào)用每個粒子的update()和draw()方法來更新和繪制它們的位置。

現(xiàn)在，我們已經(jīng)實現(xiàn)了液體和粒子的繪制。接下來，我們將添加鼠標交互功能。

添加鼠標交互

在本例中，我們將創(chuàng)建一個鼠標粒子，它將跟隨鼠標的移動而移動，并與其他粒子產(chǎn)生吸引力。以下是鼠標粒子的示例代碼：

class MouseParticle extends Particle {
  constructor(x, y, size, color) {
    super(x, y, size, color);
    this.mass = 10;
  }

  update(mouseX, mouseY) {
    this.x = mouseX;
    this.y = mouseY;
  }

  attractionForce() {
    particles.forEach((particle) => {
      if (particle !== this) {
        const dx = particle.x - this.x;
        const dy = particle.y - this.y;
        const distance = Math.sqrt(dx * dx + dy * dy);
        const force = (this.mass * particle.mass) / (distance * distance);
        const ax = force * dx / distance;
        const ay = force * dy / distance;
        particle.ax -= ax;
        particle.ay -= ay;
      }
    });
  }
}

const mouseParticle = new MouseParticle(0, 0, 20, 'white');
在這里，我們繼承了Particle類，并重寫了update()方法，以便鼠標粒子可以跟隨鼠標的移動而移動。我們還添加了一個attractionForce()方法，該方法將計算鼠標粒子和其他粒子之間的引力，并將其應用于其他粒子的加速度。

接下來，我們需要在動畫循環(huán)中調(diào)用鼠標移動事件監(jiān)聽器和繪制鼠標粒子的方法。以下是動畫循環(huán)的示例代碼：

```javascript
let mouseX = canvas.width / 2;
let mouseY = canvas.height / 2;

canvas.addEventListener('mousemove', (event) => {
  mouseX = event.clientX;
  mouseY = event.clientY;
});

function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawLiquid();
  drawParticles();
  mouseParticle.update(mouseX, mouseY);
  mouseParticle.attractionForce();
  mouseParticle.draw(ctx);
  requestAnimationFrame(loop);
}

loop();

在這里，我們添加了一個鼠標移動事件監(jiān)聽器，并在每次鼠標移動時更新鼠標的坐標。接下來，我們在動畫循環(huán)中調(diào)用了繪制鼠標粒子的方法，并在每次循環(huán)中更新鼠標粒子的位置和其他粒子的加速度。

現(xiàn)在，我們已經(jīng)實現(xiàn)了一個具有液體流動效果和鼠標交互的動態(tài)效果。您可以將下面的代碼保存到文件，在瀏覽器打開查看效果。

總結(jié)
在本文中，我們使用JavaScript實現(xiàn)了一個液體流動效果和鼠標交互的動態(tài)效果。我們創(chuàng)建了畫布和粒子，并使用canvas的漸變功能繪制了液體。我們還添加了鼠標粒子，并在每次循環(huán)中更新了粒子的位置和加速度。這個例子展示了JavaScript在動態(tài)效果和交互性方面的強大能力，希望對您有所幫助。

完整代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-640188.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Liquid Flow Page</title>
  <style>
    body {
      background-color: #000;
      overflow: hidden;
    }

    canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }

    h1 {
      font-size: 80px;
      color: #fff;
      text-align: center;
      margin-top: 200px;
    }
  </style>
</head>
<body>
  <h1>Liquid Flow Page</h1>
  <canvas id="canvas"></canvas>
  <script>
    // 創(chuàng)建canvas并設置大小
    const canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 獲取canvas上下文
    const ctx = canvas.getContext('2d');

    // 定義液體粒子的數(shù)量
    const numParticles = 200;

    // 定義液體粒子的顏色
    const particleColor = '#ff00ff';

    // 定義液體粒子的速度和加速度
    const particleSpeed = 2;
    const particleAcceleration = 0.05;

    // 定義液體的顏色
    const liquidColor1 = '#ff00ff';
    const liquidColor2 = '#00ffff';

    // 定義液體的高度和波動幅度
    const liquidHeight = 200;
    const liquidAmplitude = 50;

    // 定義鼠標粒子對象
    class MouseParticle {
      constructor(x, y, size, color) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.color = color;
        this.vx = 0;
        this.vy = 0;
      }

      // 更新粒子的位置和速度
      update(x, y) {
        this.vx = (x - this.x) / 10;
        this.vy = (y - this.y) / 10;
        this.x += this.vx;
        this.y += this.vy;
      }

      // 繪制粒子
      draw() {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
      }
    }

    // 創(chuàng)建鼠標粒子對象
    const mouseParticle = new MouseParticle(canvas.width / 2, canvas.height / 2, 20, particleColor);

    // 創(chuàng)建液體粒子對象
    class Particle {
      constructor(x, y, size, color) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.color = color;
        this.vx = Math.random() * particleSpeed - particleSpeed / 2;
        this.vy = Math.random() * particleSpeed - particleSpeed / 2;
      }

      // 更新粒子的位置和速度
      update() {
        this.x += this.vx;
        this.y += this.vy;
        this.vy += particleAcceleration;
      }

      // 繪制粒子
      draw() {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
      }

      // 計算粒子和鼠標粒子之間的距離
      distanceToMouse() {
        const dx = this.x - mouseParticle.x;
        const dy = this.y - mouseParticle.y;
        return Math.sqrt(dx * dx + dy * dy);
      }

      // 計算粒子和鼠標粒子之間的吸引力
      attractionForce() {
        const distance = this.distanceToMouse();
        const maxDistance = 100;
        const minDistance = 20;
        if (distance < maxDistance) {
          const force = (maxDistance - distance) / (maxDistance - minDistance);
          this.vx += (mouseParticle.vx * force) / 2;
          this.vy += (mouseParticle.vy * force) / 2;
        }
      }
    }

    // 創(chuàng)建液體粒子數(shù)組
    const particles = [];
    for (let i = 0; i < numParticles; i++) {
      const x = Math.random() * canvas.width;
      const y = Math.random() * canvas.height;
      const size= Math.random() * 10 + 5;
particles.push(new Particle(x, y, size, particleColor));
}

// 繪制液體
function drawLiquid() {
  const waveOffset = performance.now() / 1000;
  const liquidWidth = canvas.width;
  const liquidBottom = canvas.height - liquidHeight;

  const liquidGradient = ctx.createLinearGradient(0, liquidBottom, 0, canvas.height);
  liquidGradient.addColorStop(0, liquidColor1);
  liquidGradient.addColorStop(1, liquidColor2);

  ctx.fillStyle = liquidGradient;
  ctx.beginPath();
  ctx.moveTo(0, liquidBottom);
  for (let x = 0; x <= liquidWidth; x += 10) {
    const waveX = x / liquidWidth * Math.PI * 2;
    const waveY = Math.sin(waveX + waveOffset) * liquidAmplitude + liquidBottom;
    ctx.lineTo(x, waveY);
  }
  ctx.lineTo(canvas.width, canvas.height);
  ctx.lineTo(0, canvas.height);
  ctx.closePath();
  ctx.fill();
}

// 繪制粒子和鼠標粒子
function drawParticles() {
  particles.forEach((particle) => {
    particle.update();
    particle.attractionForce();
    particle.draw();
  });
  mouseParticle.update(mouseX, mouseY);
  mouseParticle.draw();
}

// 動畫循環(huán)
let mouseX = canvas.width / 2;
let mouseY = canvas.height / 2;
canvas.addEventListener('mousemove', (event) => {
  mouseX = event.clientX;
  mouseY = event.clientY;
});

function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawLiquid();
  drawParticles();
  requestAnimationFrame(loop);
}

loop();
</script> </body> </html>

到了這里，關于JavaScript實現(xiàn)液體流動效果和鼠標交互的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！