canvas图片渐变倒影

实现图片渐变倒影可以通过以下步骤：

1. 在canvas中绘制原始图片。
2. 在canvas中创建一个渐变对象，用于创建倒影效果。
3. 将渐变对象应用到倒影区域的矩形中。
4. 使用clip()函数裁剪出倒影区域。
5. 将裁剪后的倒影区域翻转并绘制到canvas中，使其成为倒影效果。

以下是一个简单的实现示例代码：

// 获取canvas对象和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 加载图片
var img = new Image();
img.src = 'example.jpg';
img.onload = function() {

  // 绘制原始图片
  ctx.drawImage(img, 0, 0);

  // 创建渐变对象
  var gradient = ctx.createLinearGradient(0, 0, 0, canvas.height / 2);

  // 添加渐变颜色
  gradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
  gradient.addColorStop(1, 'rgba(255, 255, 255, 1)');

  // 应用渐变到倒影区域
  ctx.fillStyle = gradient;
  ctx.fillRect(0, canvas.height / 2, canvas.width, canvas.height / 2);

  // 裁剪出倒影区域
  ctx.save();
  ctx.beginPath();
  ctx.rect(0, canvas.height / 2, canvas.width, canvas.height / 2);
  ctx.clip();

  // 翻转倒影区域并绘制
  ctx.translate(0, canvas.height);
  ctx.scale(1, -1);
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height / 2);

  // 恢复之前的状态
  ctx.restore();
};

在上述示例代码中，我们首先加载了一张示例图片，然后在canvas中绘制了原始图片。接着，我们创建了一个渐变对象并将其应用到倒影区域的矩形中。然后使用clip()函数裁剪出倒影区域，并对其进行翻转并绘制到canvas中，以实现倒影效果。