画布问题，软件更新就要更新画布

<template>
<!-- <view class="block_cont" v-show="content.show">
</view> -->
<view class="container" id="data_top" style="margin-top: 160px;">
<view style="position: relative;">
<canvas
class="canvas"
id="canvas"
canvas-id="canvas"
disable-scroll="true"
@touchstart="canvasStart($event)"
@touchmove="canvasMove($event)"
@touchend="canvasEnd"
@touchcancel="canvasEnd"
@error="canvasIdErrorCallback"
></canvas>
<span class="postsin">护士签名确认</span>
</view>
<view class="box_cont">
<button type="default" @click="cleardraw">清除</button>
<button type="warn" hover-class="none" @click="getimg">确定</button>
</view>
</view>
</template>

<script>
// canvas 全局配置
var context = null; // 使用 wx.createContext 获取绘图上下文 context
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
let DataTop = 0; // 获取距离顶部多少值
//获取系统信息
uni.getSystemInfo({
success: function(res) {
canvasw = res.windowWidth; //设备宽度
// canvash = res.windowWidth * 7 / 15;
canvash = res.windowHeight;
}
});
export default {
data() {
return {};
},
methods: {
canvasIdErrorCallback: function(e) {
console.error(e.detail.errMsg);
},
//开始
canvasStart: function(event) {
// console.log(event)
isButtonDown = true;
arrz.push(0);
// console.log(event)

                        //   这里是  1.9.1版本一下的  

// arrx.push(event.changedTouches[0].clientX);
// arry.push(event.changedTouches[0].clientY - 160);

                         ///1.9.2 版本只 能使用   
        arrx.push(event.touches[0].x);  
        arry.push(event.touches[0].y);  
    },  
    //过程  
    canvasMove: function(event) {  
        if (isButtonDown) {  
            arrz.push(1);  
            // console.log(event.touches[0])  

// arrx.push(event.changedTouches[0].clientX);
// arry.push(event.changedTouches[0].clientY - 160);
arrx.push(event.touches[0].x);
arry.push(event.touches[0].y);
}
context.clearRect(0, 0, canvasw, canvash);
context.setStrokeStyle('#000000');
context.setLineWidth(4);
context.setLineCap('round');
context.setLineJoin('round');
// context.translate(0.5,0.5)

        for (var i = 0; i < arrx.length; i  ) {  
            if (arrz[i] == 0) {  
                context.moveTo(arrx[i], arry[i]);  
            } else {  
                context.lineTo(arrx[i], arry[i]);  
            }  
        }  
        // context.scale()  
        context.stroke();  
        context.draw(false);  
    },  

    canvasEnd: function(event) {  
        isButtonDown = false;  
        // console.log(event)  
    },  
    cleardraw: function() {  
        //清除画布  
        arrx = [];  
        arry = [];  
        arrz = [];  
        context.clearRect(0, 0, canvasw, canvash);  
        context.draw(true);  
    },  
    //导出图片  
    getimg: function() {  
        let that = this;  
        if (arrx.length == 0) {  
            uni.showModal({  
                title: '提示',  
                content: '签名内容不能为空！',  
                showCancel: false  
            });  
            return false;  
        }  
        //生成图片  
        uni.canvasToTempFilePath({  
            canvasId: 'canvas',  
            success: function(res) {  
                let obj = {  
                    data64url: res.tempFilePath,  
                    show: false  
                };  

                that.$emit('on-scr', obj);  
            }  
        });  

        // 清空  

        arrx = [];  
        arry = [];  
        arrz = [];  
        context.clearRect(0, 0, canvasw, canvash);  
        context.draw(true);  
    }  
},  

/**  
 * 生命周期函数--监听页面加载  
 */  
mounted: function(options) {  
    // 使用 wx.createContext 获取绘图上下文 context  
    context = uni.createCanvasContext('canvas');  
    context.beginPath();  
    context.setStrokeStyle('#000000');  
    context.setLineWidth(4);  
    context.setLineCap('round');  
    context.setLineJoin('round');  
}  

};
</script>

<style>
/ .container {
position: relative;
top: 375upx;
} /

.container .box_cont {
position: relative;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 40rpx;
}

.container .box_cont > button {
width: 200rpx;
display: inline-block;
margin: 0;
background-color: rgba(89, 169, 223, 1);
color: #fff;
}

canvas {
width: 100%;
height: 400upx;
background: #fff;
}

.postsin {
position: absolute;
bottom: 20upx;
font-size: 30upx;
color: #666666;
padding-left: 20upx;
}
</style>