鸿蒙harmonyos JS UI canvas画布的实现

效果如下

<canvas id="canvas" ref="canvas" class="container-meet-right-canvas" @touchstart="touchstart"
                   @touchmove="touchmove" @touchcancel=touchcancel @touchend="touchend"/>
            <div class="canvas-control">
                <button value=清除 @click=clear  focusable="false"/>
                <button value=恢复 @click=restore  focusable="false"/>
                <button value=保存 @click=save  focusable="false"/>
            </div>

.container-meet-right-canvas{
    height: 400px;
    width: 600px;
    background-color: #fff;
    margin-top:50px;
}
.canvas-control{
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height:70px;
    margin-top:20px;
}
.canvas-control button{
    margin-left:20px;
    width:120px;
    height:70px;
    font-size:25px;
}

import router from @system.router
import prompt from @system.prompt

export default {
    data: {
        conentx:,
        globalX:[],
        globalY:[],
        globalZ:[],
        candraw:false,
     
    },
    onInit(){

    },
    showIcon(){
        if (this.showico != 1 || this.showico==2) {
            this.showico = 1
            this.iconpath = /common/icon/left.png
            this.topval = 0px
            return
        }
        if (this.showico == 1) {
            this.showico = 2
            this.iconpath = /common/icon/right.png
            this.topval = 150px
            return
        }
    },

    drwa(index){
        this.chossindex= index
        if (index==1 || index == 2 ) {
            const el = this.$refs.canvas;
            this.conentx = el.getContext(2d)
            this.conentx.fillStyle = #0f0
            this.conentx.beginPath()
            this.conentx.stroke()
        }
        if (index == 0) {
            this.goback()
            this.conentx = 
        }
        if (index == 3) {
            this.conentx = 
        }
    },
    clear(){
        this.conentx.clearRect(0,0,600,400)
    },
    restore(){
        this.conentx.restore()
    },
    save(){
        if (this.globalZ.length == 0) {
            prompt.showToast({
                message: 签名不能空
            })
            return false
        }
        if (this.globalZ.length<10) {
            prompt.showToast({
                message: 重新签名
            })
            return false
        }
        this.conentx.save()
    },
    // 偏移很多
    接触屏幕
    touchstart(e){

        this.candraw = true
        const touches = e.touches[0]
        this.globalX.push(touches.localX)
        this.globalY.push(touches.localY)
        this.globalZ.push(0)
    },
    屏幕移动
    touchmove(e){

        if (this.candraw) {

            const gx =this.globalX
            const gY =this.globalY
            const touches = e.touches[0]
            this.globalZ.push(1)

            this.conentx.fillStyle = #0f0
            this.conentx.lineWidth = 4
            this.conentx.beginPath()
            this.conentx.moveTo(gx[gx.length-1],gY[gx.length-1])
            this.conentx.lineTo(touches.localX,touches.localY)
            this.conentx.stroke()
            this.globalX.push(touches.localX)
            this.globalY.push(touches.localY)

        }
    },
//打断
    touchcancel(e){
        const touches = e.touches[0]
        this.globalX.push(touches.localX)
        this.globalY.push(touches.localY)
    },
//离开屏幕
    touchend(e){
        this.globalX=[]
        this.globalY = []
        this.globalZ = []
        this.candraw = false
    }
}