uniapp+vue3，签字功能

1、html部分（我的程序是要生成小程序和app，只需要其中一个可以单独复制）

<view @click="signatureEvent()">重新签字事件<view>
app
 <!-- #ifdef APP-PLUS -->
 <canvas canvas-id="firstCanvas"
  id="firstCanvas" @touchstart="touchstartEvent($event)" @touchmove="touchmoveEvent($event)"
  @touchend="touchendEvent($event)" style="width: 100%; height: 100%"
  disable-scroll="false"></canvas>
 <!-- #endif -->
 小程序
 <!-- #ifdef MP|H5 -->
  <canvas canvas-id="firstCanvas"
   id="firstCanvas" @touchstart.stop="touchstartEvent($event)"
   @touchmove.stop="touchmoveEvent($event)" @touchend.stop="touchendEvent($event)"
   style="width: 100%; height: 100%" disable-scroll="false"></canvas>
 <!-- #endif -->
<view @click="submit">提交</view>

2.ts部分

<script lang="ts" setup>
const context = ref<any>(null);//Canvas
const clientYTop = ref<any>(0);//画布与顶部的距离
const touch = ref<number>(0);//笔画数

onLoad((options) => {
//刚进来一定要初始化canvas
 initCanvas();
})    

/**
 * 初始化Canvas
 */
function initCanvas() {
    const contextInit = uni.createCanvasContext("firstCanvas");
    contextInit.setFillStyle("#FFF");
    contextInit.fillRect(0, 0, 500, 350);
    context.value = contextInit;
    contextInit.draw();
}
/**
 * 重新签字事件
 */
function signatureEvent() {
    initCanvas();
    clear();
}
/**
 * 清空Canvas
 */
function clear() {
    touch.value = 0;
    context.value.draw();
    context.value.setFillStyle("#fff");
    context.value.fillRect(0, 0, 500, 180);
}
//小程序(开发者工具，手机打开小程序，app，有轻微差别，所以取了e.changedTouches[0].x  ||e.changedTouches[0].clientX）
/**
 * Canvas开始滑动
 */
function touchstartEvent(e: any) {
    touch.value += 1;
    var query: any = uni.createSelectorQuery();
    query.select("#firstCanvas").boundingClientRect();
    query.selectViewport().scrollOffset();
    query.exec(function(res: any) {
        clientYTop.value = res[0].top;
        var x = e.changedTouches[0].x || e.changedTouches[0].clientX
        var y = e.changedTouches[0].y || (e.changedTouches[0].clientY - clientYTop.value)
        context.value.moveTo(
            x,
            y
        );
    });
}
/**
 * 滑动事件
 */
function touchmoveEvent(e: any) {
    if (clientYTop.value) {
        var x = e.changedTouches[0].x || e.changedTouches[0].clientX
        var y = e.changedTouches[0].y || (e.changedTouches[0].clientY - clientYTop.value)
        context.value.lineTo(
            x,
            y
        );
        context.value.stroke();
        context.value.draw(true);
        context.value.moveTo(
            x,
            y
        );
    }
}
/**
 * 移开清除 clientYTop
 */
function touchendEvent(e: any) {
    clientYTop.value = 0;
}

/**
 * Canvas导出图片
 */
function exportFilePath() {
    return new Promise((resolve, reject) => {
        context.value.draw(
            true,
            wx.canvasToTempFilePath({
                fileType: "jpg",
                canvasId: "firstCanvas",
                success: (res: any) => resolve(res.tempFilePath),
                fail: () => ($ajax.showToast("导出失败"), reject()),
            })
        );
    });
}
async function submit() {
 const filePath = await exportFilePath();
 console.log(filePath)
}

   
</script>

如果有帮助到你，请帮我点个赞，谢谢