vue中canvas水平镜像翻转

在Vue中使用canvas水平翻转的方法如下：

1. 在Vue组件的`mounted`钩子中获取canvas元素和2D上下文对象：

mounted() {
  const canvas = this.$refs.canvas;
  const ctx = canvas.getContext('2d');
}

2. 使用`ctx.scale()`方法设置水平缩放比例为-1，即水平翻转：

ctx.scale(-1, 1);

3. 在水平翻转后绘制canvas内容：

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

完整代码如下：

<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');

    // 水平翻转
    ctx.scale(-1, 1);

    // 绘制内容（示例）
    const image = new Image();
    image.src = '/path/to/image.jpg';
    image.onload = () => {
      ctx.drawImage(image, -canvas.width, 0, canvas.width, canvas.height);
    };
  },
};
</script>