canvas实现手写签名

1、canvas标签（touchstart、touchmove、touchend）

<canvas @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
<view @click="clear">清除</view>
<view @click="finish">完成</view>

2、uniapp中使用

onLoad() {
      this.ctx = uni.createCanvasContext("mycanvas", this);   // 创建绘图对象
             
      // 设置画笔样式
      this.ctx.lineWidth = 4;
      this.ctx.lineCap = "round";
      this.ctx.lineJoin = "round";
},
methods:{
     // 触摸开始，获取到起点
     touchstart:function(e) {
           let startX = e.changedTouches[0].x;
           let startY = e.changedTouches[0].y;
           let startPoint = { X:startX,Y:startY };
                 
           // 由于uni对canvas的实现有所不同，这里需要把起点存起来
           this.points.push(startPoint);
                 
           // 每次触摸开始，开启新的路径
           this.ctx.beginPath();
     },
             
     // 触摸移动，获取到路径点
     touchmove:function(e) {
           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:function() {                  
           this.points = [];
      },
             
      /*
          绘制笔迹：
         1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
         2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
         3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
      */
      draw: function() {
           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);
       },
             
       // 清空画布
       clear:function() {
            let that = this;
            uni.getSystemInfo({
                success: function(res) {
                     let canvasw = res.windowWidth;
                     let canvash = res.windowHeight;
                     that.ctx.clearRect(0, 0, canvasw, canvash);
                     that.ctx.draw(true);
                  },
            })
        },
            
        // base64转成blob对象
        dataURLtoBlob(dataurl) {  
            var arr = dataurl.split(','),  
            mime = arr[0].match(/:(.*?);/)[1],  
            bstr = atob(arr[1]),  
            n = bstr.length,  
            u8arr = new Uint8Array(n);  // 8位无符号整数，长度1个字节  
            console.log(mime)  
            while (n--) {  
                u8arr[n] = bstr.charCodeAt(n);  
            }  
            // console.log(JSON.stringify(u8arr));  
            return new Blob([u8arr], {  
                type: mime  
            });  
        },  
             
        // 完成绘画并上传图片
        finish:function() {
           var that = this;
           uni.canvasToTempFilePath({
              canvasId: 'mycanvas',
              success: function(res) {
                let path = res.tempFilePath;
                console.log(path, that.dataURLtoBlob(path));
              }
          })
       }
}