canvas倒影

要在 Canvas 中实现倒影效果，可以使用以下步骤：

1. 创建一个与原始图像相同大小的新 Canvas 元素和 2D 上下文。

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

2. 在新 Canvas 中绘制原始图像。

ctx.drawImage(image, 0, 0);

3. 使用 `ctx.scale` 函数将上下文的 y 轴缩放为 -1，这将使图像垂直翻转。

ctx.scale(1, -1);

4. 将翻转的图像绘制到新 Canvas 中，此时图像将会被倒置。

ctx.drawImage(image, 0, -image.height);

5. 使用 `ctx.globalAlpha` 函数将上下文的透明度设置为小于 1 的值，这将使图像变得半透明。

ctx.globalAlpha = 0.5;

6. 将半透明的图像绘制到原始 Canvas 中，此时图像将会成为倒影效果。

ctx.drawImage(canvas, 0, image.height * 2, image.width, image.height * -1);

完整的代码示例如下：

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

// 绘制原始图像
ctx.drawImage(image, 0, 0);

// 缩放 y 轴并绘制翻转的图像
ctx.scale(1, -1);
ctx.drawImage(image, 0, -image.height);

// 设置半透明度并绘制倒影
ctx.globalAlpha = 0.5;
ctx.drawImage(canvas, 0, image.height * 2, image.width, image.height * -1);