<template>

  <view>

    <button @click="draw">绘制矩形</button>

    <image v-if="imageUrl" :src="imageUrl" mode="widthFix"></image>

    <canvas

      canvas-id="myCanvas"

      style="width: 300px; height: 200px; border: 1px solid #ccc"

    ></canvas>

  </view>

</template>

<script setup>

import { ref } from 'vue';

const imageUrl = ref('');

const draw = () => {

  console.log('draw');

  const ctx = uni.createCanvasContext('myCanvas');

  // 绘制一个红色矩形

  ctx.setFillStyle('red');

  ctx.fillRect(50, 50, 200, 100);

  // 执行绘制

  ctx.draw(false, () => {

    // 绘制完成后导出为图片

    uni.canvasToTempFilePath({

      canvasId: 'myCanvas',

      success: (res) => {

        imageUrl.value = res.tempFilePath;

        console.log('导出成功:', res.tempFilePath);

      },

      fail: (err) => {

        console.error('导出失败:', err);

      }

    });

  });

};

</script>