微信小程序canvas手写签字

手写签字

 

<view style="width: 90%;height: 260px;background: #f5f5f5;margin: auto;">
  <canvas
  type="2d"
  id="myCanvas"
  style="width: 100%; height: 100%;"
  bindtouchstart="start"
  bindtouchmove="move"
  bindtouchend="end"
></canvas>
</view>

const app = getApp()

Page({
  data: {
    ctx:'',
  },

  onLoad: function () {
    this.initcanvas();
  },
  initcanvas(){ //初始化画布
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio;//缩放级别
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)
        ctx.lineGap = 'round';
        ctx.lineJoin = 'round';
        ctx.lineWidth = 5; // 字体粗细
        this.setData({ 
          ctx:ctx, 
          canvas:canvas 
        })
      })
  },
  start(e){
    this.data.ctx.beginPath(); // 开始创建一个路径，如果不调用该方法，最后无法清除画布
    this.data.ctx.moveTo(e.changedTouches[0].x,e.changedTouches[0].y) //移动路径开始点 x,y
  },
  move(e){
    this.data.ctx.lineTo(e.changedTouches[0].x,e.changedTouches[0].y);//添加直线路径x,y
    this.data.ctx.stroke(); //填充
  },
  end(){
    
  },
})