/* wxss */

page {

  background-color: #EEEEEE;

}

/* 详细信息展示样式 */

.page {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.container {

padding-bottom: 5rpx;

}

.panel {

display: flex;

flex-direction: column;

justify-content: space-between;

align-items: stretch;

box-sizing: border-box;

width: 710rpx;

margin-top: 15rpx;

border-radius: 10rpx;

background-color: #FFFFFF;

}

page { 

  --canvas-hight:800px;

}

.wricont{

  width:100%;

  height:var(--canvas-hight);

  align-items: center;

  display: flex;

}

.canvastyle{

  height:100%;

  width:100%;

  background-color: #f5f5f5;

}

<!-- wxml -->

<view class="container page">

  <view class="panel">

    <view class="wricont" style="{{viewData.style}}">

      <canvas class="canvastyle" canvas-id="myCanvas" id='myCanvas' bindtouchstart="beg_t" bindtouchmove="move_t"></canvas>

   </view>

   <view style="display:flex;align-items:center;height: 50px;">

        <button size="mini" type="warn" class="btn1" bindtap="clear">重写</button>

        <button size="mini" type="default"  class="btn2" bindtap="save">确认</button>

      </view>

  </view>

</view>

// json

{

  "usingComponents": {},

  "navigationBarTitleText": "签名确认",

  "disableScroll":true

}

//js代码

var x = 0

var y = 0

var w = 0

var h = 0

let myStyle = `

--canvas-hight:1000px;

`

Page({

  data: {

    viewData: {

      style: myStyle

    },

    ctx:'',

    image:[]

  },

  onLoad(options) {

    var that = this

    const ctx = wx.createCanvasContext('myCanvas')

    //获取手机屏幕高度和宽度

    wx.getSystemInfo({

      success (res) {

        w = res.windowWidth-28

        let h0 = res.windowHeight-110

        h =  res.windowHeight-120

        console.log(w,h)

        //根据手机高自适应

        var chageStyle = `--canvas-hight:`+h0+'px;'

        that.setData({'viewData.style': chageStyle})

        //外线框颜色

        ctx.setStrokeStyle('grey')

        ctx.fill('red')

        //画一哥矩形

        ctx.rect(2, 2, w, h)

        // 设定虚线（【实线长，虚线长】，虚线偏移量）

        ctx.setLineDash([10, 10], 5);

        //矩形线宽

        ctx.setLineWidth(2)

        //画布底色，不设定导出来图片背景默认黑色，

        ctx.setFillStyle('#f5f5f5')

        //画布底色大小，

        ctx.fillRect(2, 2, w, h)

        ctx.stroke()

        ctx.draw()

        that.setData({

          ctx:ctx

        })

      }

    })

  },

  beg_t(e) {

   //开始触摸位置，

    x = e.changedTouches[0].x

    y = e.changedTouches[0].y

    console.log(x,y);

    console.log(e);

  },

  move_t(e) {

    //开始写

    var ctx = this.data.ctx

    var x1 = e.changedTouches[0].x

    var y1 = e.changedTouches[0].y

    //指针移到开始触摸位置

    ctx.moveTo(x, y)

    //线条黑色

    ctx.setStrokeStyle('black')

     //线条宽度

    ctx.setLineWidth(5)

    // 设定虚线（【实线长，虚线长】，虚线偏移量）

    ctx.setLineDash([10, 0], 5);

    //画点（x，y）到点（x1，y1）

    ctx.lineTo(x1, y1)

    ctx.stroke()

    // ctx.draw(true)  设定true后，保留前面的draw(),不会被清空。

    ctx.draw(true)

    x = x1

    y = y1

    this.setData({

      ctx:ctx

    })

    console.log(x,y);

  },

  clear:function(){

    var that = this

    var ctx = this.data.ctx

    //线条颜色

    ctx.setStrokeStyle('grey')

    ctx.rect(2, 2, w, h)

    // 设定虚线（【实线长，虚线长】，虚线偏移量）

    ctx.setLineDash([10, 10], 5);

    //线宽

    ctx.setLineWidth(2)

    ctx.stroke()

    ctx.draw()

    that.setData({

      ctx:ctx

    })

  },

  save:function(){

    var that = this

    wx.canvasToTempFilePath({

     x: 2,

     y: 2,

     width: w,

     height: h,

     destWidth: w,

     destHeight: h,

     canvasId: 'myCanvas',

     success(res) {

       console.log(res.tempFilePath)

       that.setData({

         ["image[0]"]:res.tempFilePath,

       })

       wx.previewImage({

         current:that.data.image[0],

         urls:that.data.image

       });

     }

   })

  }

})