uni-app 签名（横屏）H5 微信小程序 可用

<template>
    <view class="main-content" @touchmove.stop.prevent="">
        <!-- 签字canvas -->
        <canvas class="mycanvas" id="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove"
            @touchend="touchend"></canvas>
        <!-- 旋转canvas -->
        <canvas class="myrotatcanvas"
            :style="{ 'z-index': -1, width: `${screenWidth}px`, height: `${(screenWidth * screenWidth) / screenHeight}px` }"
            id="rotatCanvas" canvas-id="rotatCanvas"></canvas>
        <view class="alhandwrit_canvas_back_view">
            <text class="alhandwrit_canvas_back_tv">
                {{prompt}}
            </text>
        </view>


        <cover-view class="button-line">
            <cover-view :class="isdrow?'save-button':'save-button_f'" @tap="finish">保存</cover-view>
            <cover-view class="clear-button" @tap="clear">清除</cover-view>
            <cover-view class="cancel-button" @tap="hide">关闭</cover-view>
        </cover-view>
    </view>
</template>

<script>
   
    const app = getApp();
    export default {
        data() {
            return {
                ctx: '', //绘图图像
                points: [], //路径点集合
                isdrow: false,
                screenWidth: '',
                screenHeight: '',
                isupdata: false,

                flag: '',
                pagetitle: '',
                prompt: ''
            };
        },
        mounted() {
            this.createCanvas();
            uni.getSystemInfo({
                success: e => {
                    this.screenWidth = e.screenWidth;
                    this.screenHeight = e.screenHeight;
                }
            });
        },
        onLoad: function(options) {
          	this.prompt = "审批意见"
        },
        methods: {

            hide() {
                if (this.isupdata) {
                    return
                }
                uni.navigateBack({
                    delta: 1
                });
            },
            //创建并显示画布
            createCanvas() {

                this.showCanvas = true;
                this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
                //设置画笔样式
                this.ctx.lineWidth = 2;
                this.ctx.lineCap = 'round';
                this.ctx.lineJoin = 'round';
                this.ctx.setFillStyle('red')

            },
            //触摸开始，获取到起点
            touchstart(e) {
                if (this.isupdata) {
                    console.log("isupdataing");
                    return
                }
                let startX = e.changedTouches[0].x;
                let startY = e.changedTouches[0].y;
                let startPoint = {
                    X: startX,
                    Y: startY
                };
                this.points.push(startPoint);
                //每次触摸开始，开启新的路径
                this.ctx.beginPath();
            },
            //触摸移动，获取到路径点
            touchmove(e) {
                if (this.isupdata) {
                    console.log("isupdataing");
                    return
                }
                let moveX = e.changedTouches[0].x;
                let moveY = e.changedTouches[0].y;
                let movePoint = {
                    X: moveX,
                    Y: moveY
                };
                this.points.push(movePoint); //存点
                let len = this.points.length;
                if (len >= 2) {
                    this.draw(); //绘制路径
                }
            },
            // 触摸结束，将未绘制的点清空防止对后续路径产生干扰
            touchend() {
                this.points = [];
            },
           
             //  绘制笔迹
            draw() {
                if (this.isupdata) {
                    console.log("isupdataing");
                    return
                }
                let point1 = this.points[0];
                let point2 = this.points[1];
                this.points.shift();
                this.ctx.moveTo(point1.X, point1.Y);
                this.ctx.lineTo(point2.X, point2.Y);
                this.ctx.stroke();
                this.ctx.draw(true);
                this.isdrow = true
            },
            //清空画布
            clear() {
                if (this.isupdata) {
                    console.log("isupdataing");
                    return
                }
                this.ctx.clearRect(0, 0, this.screenWidth, this.screenHeight);
                this.ctx.draw(true);
                this.isdrow = false
            },
            //完成绘画并保存到本地
            finish() {
                if (!this.isdrow) {
                    return
                }
                if (this.isupdata) {
                    console.log("isupdataing");
                    return
                }
                uni.showLoading({
                    title: "正在生成签字",
                    mask: true,


                })
                this.isupdata = true
                uni.canvasToTempFilePath({
                        canvasId: 'mycanvas',
                        success: res => {
                            this.rotat(res.tempFilePath);
                        },
                        fail: (err) => {
                            console.log(err)
                            this.isupdata = false
                        },
                        complete: com => {}
                    },
                    this
                );
            },
            // 将图片选装
            rotat(e) {
                var that = this
                let rotatCtx = uni.createCanvasContext('rotatCanvas', this); //创建绘图对象
                // 重新定位中心点
                rotatCtx.translate(0, (this.screenWidth * this.screenWidth) / this.screenHeight);
                // 将画布逆时针旋转90度
                rotatCtx.rotate((270 * Math.PI) / 180);
                // 将签字图片绘制进入Canvas
                rotatCtx.drawImage(e, 0, 0, (this.screenWidth * this.screenWidth) / this.screenHeight, this.screenWidth);
                // 保存后旋转后的结果
                rotatCtx.draw(true);
                setTimeout(() => {
                    // 生成图片并回调
                    uni.canvasToTempFilePath({
                            canvasId: 'rotatCanvas',
                            success: val => {
                                console.log(val.tempFilePath)
                                that.uploadImag(val.tempFilePath)
                                // this.$emit('tempFilePath', val.tempFilePath);
                                // setTimeout(() => {
                                //     this.hide();
                                // }, 500);
                            },
                            fail: (err) => {
                                console.log(err)
                                this.isupdata = false
                            },
                            complete: com => {
                                // console.log(com);
                            }
                        },
                        this
                    );
                }, 500);
            },
            uploadImag: function(filePath) {
               
 

            }

        }
    };
</script>

<style lang="scss" scoped>
    .main-content {
        width: 100vw;
        height: 100vh;

        position: fixed;
        top: 0rpx;
        left: 0rpx;
        z-index: 9999;
    }

    .mycanvas {
        width: 100vw;
        height: 100vh;
        background: rgba(255, 255, 255, 0);
        position: fixed;
        left: 0rpx;
        top: 0rpx;
        z-index: 2;
    }

    .myrotatcanvas {

        background: rgba(255, 255, 255, 0);
        position: fixed;
        left: 0rpx;
        top: -500rpx;
        z-index: 0;
    }

    .alhandwrit_canvas_back_view {

        width: 100vw;
        height: 100vh;
        display: flex;
        vertical-align: center;
        justify-content: center;
        background: rgba(255, 255, 255, 1);
        align-items: center;
        text-align: center;

        z-index: 1;
    }

    .alhandwrit_canvas_back_tv {

        width: 750rpx;

        display: flex;
        align-items: center;
        text-align: left;
        justify-content: center;

        transform: rotate(90deg);

        font-size: 130rpx;
        letter-spacing: 30rpx;

        z-index: 1;
        color: #cfcfcf;

    }

    .button-line {
        transform: rotate(90deg);
        position: fixed;
        bottom: 270rpx;
        left: -200rpx;
        width: 500rpx;
        height: 70rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 999;
    }

    .button-style {
        color: #ffffff;
        width: 100rpx;
        height: 70rpx;
        text-align: center;
        line-height: 70rpx;
        border-radius: 10rpx;
    }

    .save-button {
        @extend .button-style;
        width: 150rpx;

        background-color: #02b340;
    }

    .save-button_f {
        @extend .button-style;
        width: 150rpx;

        background-color: #afafaf;
    }

    .clear-button {
        @extend .button-style;
        width: 150rpx;
        background-color: #ffa500;
    }

    .cancel-button {
        width: 150rpx;
        @extend .button-style;
        background-color: #e10b2b;
    }
</style>