canvas 实现水流效果

实现水流效果主要需要以下步骤：

1. 绘制水流路径

使用 Canvas 绘制一条水流路径，可以通过 bezierCurveTo() 方法绘制贝塞尔曲线来实现。

2. 绘制水流

使用 Canvas 绘制水流，可以通过绘制多个圆形来实现，圆形的位置和大小可以根据时间和水流路径计算得到。

3. 实现动画效果

在每一帧中，重新计算水流位置和大小，然后清空 Canvas 并重新绘制水流。

以下是一个简单的 Canvas 水流效果实现示例代码：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var waterPath = []; // 水流路径
var waterDrops = []; // 水滴
var waterSpeed = 0.01; // 水速
var waterRadius = 10; // 水滴半径
var waterColor = '#00A0E9'; // 水颜色
var lastTime = 0; // 上一帧时间戳

// 添加水流路径点
function addWaterPath(x, y) {
  waterPath.push({x: x, y: y});
}

// 绘制水流路径
function drawWaterPath() {
  ctx.beginPath();
  ctx.moveTo(waterPath[0].x, waterPath[0].y);
  for (var i = 1; i < waterPath.length - 2; i++) {
    var c = (waterPath[i].x + waterPath[i + 1].x) / 2;
    var d = (waterPath[i].y + waterPath[i + 1].y) / 2;
    ctx.quadraticCurveTo(waterPath[i].x, waterPath[i].y, c, d);
  }
  ctx.quadraticCurveTo(waterPath[i].x, waterPath[i].y, waterPath[i + 1].x, waterPath[i + 1].y);
  ctx.strokeStyle = waterColor;
  ctx.lineWidth = 2;
  ctx.stroke();
}

// 添加水滴
function addWaterDrop() {
  var t = Date.now();
  var deltaTime = t - lastTime;
  lastTime = t;

  var speed = waterSpeed * deltaTime;
  for (var i = 0; i < waterPath.length - 1; i++) {
    var distance = Math.sqrt(Math.pow(waterPath[i + 1].x - waterPath[i].x, 2) + Math.pow(waterPath[i + 1].y - waterPath[i].y, 2)); // 水流路径长度
    var count = Math.floor(distance / speed); // 水滴数量
    var x = waterPath[i].x, y = waterPath[i].y;

    for (var j = 0; j < count; j++) {
      x += (waterPath[i + 1].x - waterPath[i].x) / count;
      y += (waterPath[i + 1].y - waterPath[i].y) / count;
      var r = waterRadius * (1 - j / count);
      waterDrops.push({x: x, y: y, r: r});
    }
  }
}

// 绘制水滴
function drawWaterDrops() {
  for (var i = 0; i < waterDrops.length; i++) {
    ctx.beginPath();
    ctx.arc(waterDrops[i].x, waterDrops[i].y, waterDrops[i].r, 0, 2 * Math.PI);
    ctx.fillStyle = waterColor;
    ctx.fill();
  }
}

// 实现动画效果
function animate() {
  requestAnimationFrame(animate);

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  addWaterDrop();
  drawWaterDrops();
  drawWaterPath();
}

// 初始化水流路径
addWaterPath(100, 300);
addWaterPath(200, 200);
addWaterPath(300, 400);
addWaterPath(400, 200);
addWaterPath(500, 300);

// 开始动画
animate();

需要注意的是，这个示例代码中使用了 requestAnimationFrame() 方法来实现动画效果，这是一种更加高效和流畅的动画实现方式。