canvas画一个可交互的液体球体

好的，这里提供一个基本的可交互的液体球体的canvas示例代码：

HTML代码：

<canvas id="canvas"></canvas>

JavaScript代码：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let mouseX = 0; // 鼠标X坐标
let mouseY = 0; // 鼠标Y坐标

canvas.addEventListener('mousemove', (e) => {
  // 取得鼠标坐标
  mouseX = e.clientX - canvas.offsetLeft;
  mouseY = e.clientY - canvas.offsetTop;
});

class LiquidSphere {
  constructor(x, y, radius) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = 'rgba(255, 255, 255, 0.5)';
    this.numDrops = 20;
    this.drops = [];

    // 创建水滴
    for (let i = 0; i < this.numDrops; i++) {
      const drop = {
        x: Math.random() * this.radius * 2 + this.x - this.radius,
        y: Math.random() * this.radius * 2 + this.y - this.radius,
        vx: 0,
        vy: 0,
        size: Math.random() * 5 + 5,
        color: 'rgba(0, 0, 255, 0.5)'
      };
      this.drops.push(drop);
    }
  }

  update() {
    // 更新水滴位置
    for (let i = 0; i < this.numDrops; i++) {
      const drop = this.drops[i];
      const dx = drop.x - this.x;
      const dy = drop.y - this.y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      const forceDirectionX = dx / distance;
      const forceDirectionY = dy / distance;

      // 吸引力
      const maxDistance = this.radius;
      const force = (maxDistance - distance) / maxDistance;
      const directionX = forceDirectionX * force * 0.1;
      const directionY = forceDirectionY * force * 0.1;
      drop.vx += directionX;
      drop.vy += directionY;

      // 摩擦力
      drop.vx *= 0.99;
      drop.vy *= 0.99;

      // 更新位置
      drop.x += drop.vx;
      drop.y += drop.vy;

      // 边界处理
      if (drop.x < this.x - this.radius || drop.x > this.x + this.radius) {
        drop.vx *= -1;
      }
      if (drop.y < this.y - this.radius || drop.y > this.y + this.radius) {
        drop.vy *= -1;
      }
    }
  }

  draw() {
    // 绘制水滴
    for (let i = 0; i < this.numDrops; i++) {
      const drop = this.drops[i];
      ctx.beginPath();
      ctx.arc(drop.x, drop.y, drop.size, 0, Math.PI * 2);
      ctx.fillStyle = drop.color;
      ctx.fill();
    }

    // 绘制液体球体
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();

    // 绘制阴影
    const gradient = ctx.createRadialGradient(this.x, this.y, this.radius, this.x, this.y, this.radius * 1.2);
    gradient.addColorStop(0, 'rgba(0, 0, 0, 0.1)');
    gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius * 1.2, 0, Math.PI * 2);
    ctx.fill();
  }
}

const liquidSphere = new LiquidSphere(canvas.width / 2, canvas.height / 2, 100);

function loop() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 更新液体球体
  liquidSphere.update();

  // 绘制液体球体
  liquidSphere.draw();

  // 绘制鼠标交互效果
  const distance = Math.sqrt((mouseX - liquidSphere.x) ** 2 + (mouseY - liquidSphere.y) ** 2);
  if (distance < liquidSphere.radius) {
    const alpha = 1 - distance / liquidSphere.radius;
    ctx.beginPath();
    ctx.arc(mouseX, mouseY, 20, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;
    ctx.fill();
  }

  requestAnimationFrame(loop);
}

loop();

这个示例代码中，我们首先定义了一个 `LiquidSphere` 类，表示液体球体。在类的构造函数中，我们设置了液体球体的位置、半径、颜色以及水滴数量，并随机生成了一些水滴，每个水滴的位置、大小、颜色都是随机的。

接着，我们在 `LiquidSphere` 类中定义了 `update()` 方法和 `draw()` 方法。在 `update()` 方法中，我们更新了每个水滴的位置，使其受到液体球体的吸引力和摩擦力的影响，并处理了边界问题。在 `draw()` 方法中，我们绘制了所有水滴和液体球体，并添加了阴影效果。

最后，在 `loop()` 函数中，我们不断清空画布、更新液体球体、绘制液体球体、绘制鼠标交互效果，并使用 `requestAnimationFrame()` 函数不断循环执行 `loop()` 函数，以实现动画效果。