基于vue的canvas水印

实现canvas水印的基本思路是通过在canvas画布上绘制文本，并设置文本的透明度和位置，以达到水印的效果。下面是一个基于Vue的canvas水印实现的示例代码：

<template>
  <div>
    <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      canvasWidth: 500,
      canvasHeight: 500,
      watermarkText: 'Hello World',
      font: '20px Arial',
      opacity: 0.5,
      textColor: '#000000',
    };
  },
  mounted() {
    this.createWatermark();
  },
  methods: {
    createWatermark() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');

      ctx.font = this.font;
      ctx.fillStyle = this.textColor;
      ctx.globalAlpha = this.opacity;

      const textWidth = ctx.measureText(this.watermarkText).width;
      const textHeight = parseInt(this.font, 10);
      const x = (canvas.width - textWidth) / 2;
      const y = (canvas.height - textHeight) / 2;

      ctx.fillText(this.watermarkText, x, y);
    },
  },
};
</script>

在上面的代码中，我们使用Vue的`ref`属性获取canvas元素，并在`mounted()`钩子函数中调用`createWatermark()`方法来绘制水印。`createWatermark()`方法中，我们先获取canvas的2D上下文对象，然后设置文本的字体、颜色和透明度。接着，我们通过`measureText()`方法获取文本的宽度，计算出文本的位置，最后调用`fillText()`方法在canvas上绘制文本。

需要注意的是，我们还可以根据需要调整水印的位置、字体、颜色、透明度等属性，以实现更多样化的水印效果。