用vue3和uniapp的方法

在 Vue 3 和 Uniapp 中，绘制 Canvas2D 并生成图片的方法也大致相同，具体实现步骤如下：

1. 在 `template` 中添加 `canvas` 标签，设置宽高和 `ref`。

<canvas ref="myCanvas" style="width: 100%; height: 100%;"></canvas>

2. 在 `setup` 中使用 `onMounted` 钩子函数获取 `canvas` 上下文对象，并进行绘制。绘制完成后可以通过 `toDataURL` 方法将画布转换为 base64 编码的图片数据。

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const canvasRef = ref(null);
    const imageUrl = ref('');

    onMounted(() => {
      const canvas = canvasRef.value;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#ffffff';
      ctx.fillRect(0, 0, 100, 100);
      ctx.fillStyle = '#000000';
      ctx.font = 'normal 20px sans-serif';
      ctx.fillText('Hello, World!', 10, 50);
      imageUrl.value = canvas.toDataURL('image/png');
    });

    return {
      canvasRef,
      imageUrl
    };
  }
}

3. 生成的 base64 编码的图片数据可以通过 `img` 标签的 `src` 属性显示在页面中。

<template>
  <div>
    <canvas ref="myCanvas" style="width: 100%; height: 100%;"></canvas>
    <img :src="imageUrl" style="width: 100%; height: 100%;">
  </div>
</template>

完整代码示例：

<template>
  <div>
    <canvas ref="myCanvas" style="width: 100%; height: 100%;"></canvas>
    <img :src="imageUrl" style="width: 100%; height: 100%;">
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const canvasRef = ref(null);
    const imageUrl = ref('');

    onMounted(() => {
      const canvas = canvasRef.value;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#ffffff';
      ctx.fillRect(0, 0, 100, 100);
      ctx.fillStyle = '#000000';
      ctx.font = 'normal 20px sans-serif';
      ctx.fillText('Hello, World!', 10, 50);
      imageUrl.value = canvas.toDataURL('image/png');
    });

    return {
      canvasRef,
      imageUrl
    };
  }
}
</script>