需求：小程序開發(fā)中入會(huì)的時(shí)候需要驗(yàn)證本人簽名已計(jì)算優(yōu)惠折扣肯骇，需要在入會(huì)的時(shí)候上傳手寫簽名信息窥浪，查了下資料，有幾個(gè)不同的版本笛丙，個(gè)人修改測試了兩版漾脂，覺得各有千秋，第一款偶爾會(huì)有卡頓的現(xiàn)象（android系統(tǒng)胚鸯，重寫兩次以后）骨稿，但是筆記連貫，自己看起來比較舒服姜钳，第二種卡頓感較弱坦冠，但是筆跡不精確，簽名看起來不精細(xì)哥桥，所以選擇了第一種進(jìn)行改寫

代碼部分

html部分功能點(diǎn)根據(jù)項(xiàng)目需求適當(dāng)放開辙浑，注意btn解開的話需要看下btn的位置樣式！調(diào)整下left top值至合適的位置即可（目前有切換筆跡顏色拟糕，重寫判呕，保存到本地倦踢，上傳，確認(rèn)簽名等功能點(diǎn)）

<template>
  <view class="wrapper">
    <view class="handBtn">
      <image @click.stop="selectColorEvent" :src="selectColor === 'black' ? blackImg : blackImgSelcected" :class="selectColor === 'black' ? 'color_select' : ''"
        class="black-select" data-color="black" data-color-value="#1A1A1A"></image>
      <image @click.stop="selectColorEvent" :src="selectColor === 'red' ? redImg : redImgSelcected" :class="selectColor === 'red' ? 'color_select' : ''"
        class="red-select" data-color="red" data-color-value="#ca262a"></image>
      <button @click.stop="retDraw" class="delBtn">重寫</button>
      <!-- <button @click.stop="subCanvas" class="subBtn">完成</button> -->
      <!-- <button @click.stop="saveCanvasAsImg" class="saveBtn">保存</button> -->
      <button @click.stop="previewCanvasImg" class="previewBtn">預(yù)覽</button>
      <!-- <button @click.stop="uploadCanvasImg" class="uploadBtn">上傳</button> -->
      <button @click.stop="subCanvas" class="subBtn">完成</button>
    </view>
    <view class="handCenter">
      <canvas class="handWriting" disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove"
        @touchend="uploadScaleEnd" @click="mouseDown" canvas-id="handWriting">
      </canvas>
    </view>
    <view class="handRight">
      <view class="handTitle">手寫板</view>
    </view>
  </view>
</template>

js部分

data() {
      return {
        phone: '',
        nick: "",
        name: "",
        saveArr: [0, 0, 0],
        sourceCode: '',
        blackImg: require("../../static/images/sign/color_black.png"),
        blackImgSelcected: require("../../static/images/sign/color_black_selected.png"),
        redImg: require("../../static/images/sign/color_red.png"),
        redImgSelcected: require("../../static/images/sign/color_red_selected.png"),
        canvasName: 'handWriting',
        ctx: '',
        canvasWidth: 0,
        canvasHeight: 0,
        transparent: 1, // 透明度
        selectColor: 'black',
        lineColor: '#1A1A1A', // 顏色
        lineSize: 1.5, // 筆記倍數(shù)
        lineMin: 0.5, // 最小筆畫半徑
        lineMax: 4, // 最大筆畫半徑
        pressure: 1, // 默認(rèn)壓力
        smoothness: 60, //順滑度佛玄，用60的距離來計(jì)算速度
        currentPoint: {},
        currentLine: [], // 當(dāng)前線條
        firstTouch: true, // 第一次觸發(fā)
        radius: 1, //畫圓的半徑
        cutArea: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        }, //裁剪區(qū)域
        bethelPoint: [], //保存所有線條 生成的貝塞爾點(diǎn)硼一；
        lastPoint: 0,
        chirography: [], //筆跡
        currentChirography: {}, //當(dāng)前筆跡
        linePrack: [], //劃線軌跡 , 生成線條的實(shí)際點(diǎn)
        baseAddress: ''
      }
    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面加載
     */
    onLoad: function(options) {
      let that = this;
      that.phone = options.phone
      that.sourceCode = options.sourceCode;
      let canvasName = this.canvasName
      let ctx = uni.createCanvasContext(canvasName)
      this.ctx = ctx
      var query = uni.createSelectorQuery();
      query.select('.handCenter').boundingClientRect(rect => {
        this.canvasWidth = rect.width
        this.canvasHeight = rect.height
        /* 將canvas背景設(shè)置為 白底，不設(shè)置  導(dǎo)出的canvas的背景為透明 */
        // console.log(this, 'hahah');
        this.setCanvasBg('#fff');
      }).exec();
    },

    methods: {
      /*======所有自定義函數(shù)======*/
      // 筆跡開始
      uploadScaleStart(e) {
        if (e.type != 'touchstart') return false;
        let ctx = this.ctx;
        ctx.setFillStyle(this.lineColor); // 初始線條設(shè)置顏色
        ctx.setGlobalAlpha(this.transparent); // 設(shè)置半透明
        let currentPoint = {
          x: e.touches[0].x,
          y: e.touches[0].y
        }
        let currentLine = this.currentLine;
        currentLine.unshift({
          time: new Date().getTime(),
          dis: 0,
          x: currentPoint.x,
          y: currentPoint.y
        })
        this.currentPoint = currentPoint
        if (this.firstTouch) {
          this.cutArea = {
            top: currentPoint.y,
            right: currentPoint.x,
            bottom: currentPoint.y,
            left: currentPoint.x
          }
          this.firstTouch = false
        }
        this.pointToLine(currentLine);
      },
      // 筆跡移動(dòng)
      uploadScaleMove(e) {
        if (e.type != 'touchmove') return false;
        if (e.cancelable) {
          // 判斷默認(rèn)行為是否已經(jīng)被禁用
          if (!e.defaultPrevented) {
            e.preventDefault();
          }
        }
        let point = {
          x: e.touches[0].x,
          y: e.touches[0].y
        }

        //測試裁剪
        if (point.y < this.cutArea.top) {
          this.cutArea.top = point.y;
        }
        if (point.y < 0) this.cutArea.top = 0;

        if (point.x > this.cutArea.right) {
          this.cutArea.right = point.x;
        }
        if (this.canvasWidth - point.x <= 0) {
          this.cutArea.right = this.canvasWidth;
        }
        if (point.y > this.cutArea.bottom) {
          this.cutArea.bottom = point.y;
        }
        if (this.canvasHeight - point.y <= 0) {
          this.cutArea.bottom = this.canvasHeight;
        }
        if (point.x < this.cutArea.left) {
          this.cutArea.left = point.x;
        }
        if (point.x < 0) this.cutArea.left = 0;
        this.lastPoint = this.currentPoint
        this.currentPoint = point
        let currentLine = this.currentLine
        currentLine.unshift({
          time: new Date().getTime(),
          dis: this.distance(this.currentPoint, this.lastPoint),
          x: point.x,
          y: point.y
        })
        this.pointToLine(currentLine);
      },
      // 筆跡結(jié)束
      uploadScaleEnd(e) {
        if (e.type != 'touchend') return 0;
        let point = {
          x: e.changedTouches[0].x,
          y: e.changedTouches[0].y
        }
        this.lastPoint = this.currentPoint,
          this.currentPoint = point
        let currentLine = this.currentLine
        currentLine.unshift({
          time: new Date().getTime(),
          dis: this.distance(this.currentPoint, this.lastPoint),
          x: point.x,
          y: point.y
        })
        if (currentLine.length > 2) {
          var info = (currentLine[0].time - currentLine[currentLine.length - 1].time) / currentLine.length;
          //$("#info").text(info.toFixed(2));
        }
        //一筆結(jié)束梦抢，保存筆跡的坐標(biāo)點(diǎn)般贼，清空，當(dāng)前筆跡
        //增加判斷是否在手寫區(qū)域奥吩；
        this.pointToLine(currentLine);
        var currentChirography = {
          lineSize: this.lineSize,
          lineColor: this.lineColor
        };
        var chirography = this.chirography
        chirography.unshift(currentChirography);
        this.chirography = chirography
        var linePrack = this.linePrack
        linePrack.unshift(this.currentLine);
        this.linePrack = linePrack
        this.currentLine = []
      },

      retDraw() {
        this.ctx.clearRect(0, 0, 700, 730)
        this.ctx.draw();
        //設(shè)置canvas背景
        this.setCanvasBg("#fff");
      },
      //畫兩點(diǎn)之間的線條哼蛆；參數(shù)為:line，會(huì)繪制最近的開始的兩個(gè)點(diǎn)霞赫；
      pointToLine(line) {
        this.calcBethelLine(line);
        return;
      },
      //計(jì)算插值的方式腮介；
      calcBethelLine(line) {
        if (line.length <= 1) {
          line[0].r = this.radius;
          return;
        }
        let x0, x1, x2, y0, y1, y2, r0, r1, r2, len, lastRadius, dis = 0,
          time = 0,
          curveValue = 0.5;
        if (line.length <= 2) {
          x0 = line[1].x
          y0 = line[1].y
          x2 = line[1].x + (line[0].x - line[1].x) * curveValue;
          y2 = line[1].y + (line[0].y - line[1].y) * curveValue;
          //x2 = line[1].x;
          //y2 = line[1].y;
          x1 = x0 + (x2 - x0) * curveValue;
          y1 = y0 + (y2 - y0) * curveValue;;
        } else {
          x0 = line[2].x + (line[1].x - line[2].x) * curveValue;
          y0 = line[2].y + (line[1].y - line[2].y) * curveValue;
          x1 = line[1].x;
          y1 = line[1].y;
          x2 = x1 + (line[0].x - x1) * curveValue;
          y2 = y1 + (line[0].y - y1) * curveValue;
        }
        //從計(jì)算公式看，三個(gè)點(diǎn)分別是(x0,y0),(x1,y1),(x2,y2) 端衰；(x1,y1)這個(gè)是控制點(diǎn)叠洗，控制點(diǎn)不會(huì)落在曲線上；實(shí)際上旅东，這個(gè)點(diǎn)還會(huì)手寫獲取的實(shí)際點(diǎn)灭抑，卻落在曲線上
        len = this.distance({
          x: x2,
          y: y2
        }, {
          x: x0,
          y: y0
        });
        lastRadius = this.radius;
        for (let n = 0; n < line.length - 1; n++) {
          dis += line[n].dis;
          time += line[n].time - line[n + 1].time;
          if (dis > this.smoothness) break;
        }
        this.radius = Math.min(time / len * this.pressure + this.lineMin, this.lineMax) * this.lineSize
        line[0].r = this.radius;
        //計(jì)算筆跡半徑；
        if (line.length <= 2) {
          r0 = (lastRadius + this.radius) / 2;
          r1 = r0;
          r2 = r1;
          //return;
        } else {
          r0 = (line[2].r + line[1].r) / 2;
          r1 = line[1].r;
          r2 = (line[1].r + line[0].r) / 2;
        }
        let n = 5;
        let point = [];
        for (let i = 0; i < n; i++) {
          let t = i / (n - 1);
          let x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2;
          let y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2;
          let r = lastRadius + (this.radius - lastRadius) / n * i;
          point.push({
            x: x,
            y: y,
            r: r
          });
          if (point.length == 3) {
            let a = this.ctaCalc(point[0].x, point[0].y, point[0].r, point[1].x, point[1].y, point[1].r, point[2].x,
              point[2].y, point[2].r);
            a[0].color = this.lineColor;
            this.bethelDraw(a, 1);
            point = [{
              x: x,
              y: y,
              r: r
            }];
          }
        }
        this.currentLine = line
      },
      //求兩點(diǎn)之間距離
      distance(a, b) {
        let x = b.x - a.x;
        let y = b.y - a.y;
        return Math.sqrt(x * x + y * y);
      },
      ctaCalc(x0, y0, r0, x1, y1, r1, x2, y2, r2) {
        let a = [],
          vx01, vy01, norm, n_x0, n_y0, vx21, vy21, n_x2, n_y2;
        vx01 = x1 - x0;
        vy01 = y1 - y0;
        norm = Math.sqrt(vx01 * vx01 + vy01 * vy01 + 0.0001) * 2;
        vx01 = vx01 / norm * r0;
        vy01 = vy01 / norm * r0;
        n_x0 = vy01;
        n_y0 = -vx01;
        vx21 = x1 - x2;
        vy21 = y1 - y2;
        norm = Math.sqrt(vx21 * vx21 + vy21 * vy21 + 0.0001) * 2;
        vx21 = vx21 / norm * r2;
        vy21 = vy21 / norm * r2;
        n_x2 = -vy21;
        n_y2 = vx21;
        a.push({
          mx: x0 + n_x0,
          my: y0 + n_y0,
          color: "#1A1A1A"
        });
        a.push({
          c1x: x1 + n_x0,
          c1y: y1 + n_y0,
          c2x: x1 + n_x2,
          c2y: y1 + n_y2,
          ex: x2 + n_x2,
          ey: y2 + n_y2
        });
        a.push({
          c1x: x2 + n_x2 - vx21,
          c1y: y2 + n_y2 - vy21,
          c2x: x2 - n_x2 - vx21,
          c2y: y2 - n_y2 - vy21,
          ex: x2 - n_x2,
          ey: y2 - n_y2
        });
        a.push({
          c1x: x1 - n_x2,
          c1y: y1 - n_y2,
          c2x: x1 - n_x0,
          c2y: y1 - n_y0,
          ex: x0 - n_x0,
          ey: y0 - n_y0
        });
        a.push({
          c1x: x0 - n_x0 - vx01,
          c1y: y0 - n_y0 - vy01,
          c2x: x0 + n_x0 - vx01,
          c2y: y0 + n_y0 - vy01,
          ex: x0 + n_x0,
          ey: y0 + n_y0
        });
        a[0].mx = a[0].mx.toFixed(1);
        a[0].mx = parseFloat(a[0].mx);
        a[0].my = a[0].my.toFixed(1);
        a[0].my = parseFloat(a[0].my);
        for (let i = 1; i < a.length; i++) {
          a[i].c1x = a[i].c1x.toFixed(1);
          a[i].c1x = parseFloat(a[i].c1x);
          a[i].c1y = a[i].c1y.toFixed(1);
          a[i].c1y = parseFloat(a[i].c1y);
          a[i].c2x = a[i].c2x.toFixed(1);
          a[i].c2x = parseFloat(a[i].c2x);
          a[i].c2y = a[i].c2y.toFixed(1);
          a[i].c2y = parseFloat(a[i].c2y);
          a[i].ex = a[i].ex.toFixed(1);
          a[i].ex = parseFloat(a[i].ex);
          a[i].ey = a[i].ey.toFixed(1);
          a[i].ey = parseFloat(a[i].ey);
        }
        return a;
      },
      bethelDraw(point, is_fill, color) {
        let ctx = this.ctx;
        ctx.beginPath();
        ctx.moveTo(point[0].mx, point[0].my);
        if (undefined != color) {
          ctx.setFillStyle(color);
          ctx.setStrokeStyle(color);
        } else {
          ctx.setFillStyle(point[0].color);
          ctx.setStrokeStyle(point[0].color);
        }
        for (let i = 1; i < point.length; i++) {
          ctx.bezierCurveTo(point[i].c1x, point[i].c1y, point[i].c2x, point[i].c2y, point[i].ex, point[i].ey);
        }
        ctx.stroke();
        if (undefined != is_fill) {
          ctx.fill(); //填充圖形 ( 后繪制的圖形會(huì)覆蓋前面的圖形, 繪制時(shí)注意先后順序 )
        }
        ctx.draw(true)
      },
      selectColorEvent(event) {
        console.log(event)
        var color = event.currentTarget.dataset.colorValue;
        var colorSelected = event.currentTarget.dataset.color;
        this.selectColor = colorSelected
        this.lineColor = color
      },

      //將Canvas內(nèi)容轉(zhuǎn)成 臨時(shí)圖片 --> cb 為回調(diào)函數(shù) 形參 tempImgPath 為 生成的圖片臨時(shí)路徑
      canvasToImg(cb) { //這種寫法移動(dòng)端 出不來
        this.ctx.draw(true, () => {
          uni.canvasToTempFilePath({
            canvasId: 'handWriting',
            fileType: 'png',
            quality: 1, //圖片質(zhì)量
            success(res) {
              // console.log(res.tempFilePath, 'canvas生成圖片地址');
              uni.showToast({
                title: '執(zhí)行了嗎抵代？',
              })
              cb(res.tempFilePath);
            }
          })
        });
      },

      //完成
      subCanvas() {
        let that = this
        uni.canvasToTempFilePath({
          x: 0, // 起點(diǎn)坐標(biāo)
          y: 0,
         // 寬高位置信息根據(jù)項(xiàng)目實(shí)際情況調(diào)整
          width: 343, // canvas 寬
          height: 200, // canvas 高
          canvasId: 'handWriting', // canvas id
          success(res) {
            console.log(res)
            uni.request({
              url: res.tempFilePath, //臨時(shí)路徑
              responseType: 'arraybuffer', //設(shè)置返回的數(shù)據(jù)格式為arraybuffer
              success: res => {
                const base64 = "data:image/png;base64," + uni.arrayBufferToBase64(res.data)
                console.log(base64)
                // that.baseAddress = base64
              }
            })
          }
        })
      },

      //保存到相冊
      saveCanvasAsImg() {
        /*
                this.canvasToImg( tempImgPath=>{
                    // console.log(tempImgPath, '臨時(shí)路徑');

                    uni.saveImageToPhotosAlbum({
                        filePath: tempImgPath,
                        success(res) {

                            uni.showToast({
                                title: '已保存到相冊',
                                duration: 2000
                            });

                        }
                    })

                } );
        */

        uni.canvasToTempFilePath({
          canvasId: 'handWriting',
          fileType: 'png',
          quality: 1, //圖片質(zhì)量
          success(res) {
            // console.log(res.tempFilePath, 'canvas生成圖片地址');
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success(res) {
                uni.showToast({
                  title: '已保存到相冊',
                  duration: 2000
                });
              }
            })
          }
        })
      },

      //預(yù)覽
      previewCanvasImg() {
        uni.canvasToTempFilePath({
          canvasId: 'handWriting',
          fileType: 'jpg',
          quality: 1, //圖片質(zhì)量
          success(res) {
            // console.log(res.tempFilePath, 'canvas生成圖片地址');
            uni.previewImage({
              urls: [res.tempFilePath], //預(yù)覽圖片 數(shù)組
            })
          }
        })
        /*  //移動(dòng)端出不來  ^~^Ｌ诮凇！
                this.canvasToImg( tempImgPath=>{
                    uni.previewImage({
                        urls: [tempImgPath], //預(yù)覽圖片 數(shù)組
                    })
                } );
        */
      },

      //上傳
      uploadCanvasImg() {
        // console.log(999);
        uni.canvasToTempFilePath({
          canvasId: 'handWriting',
          fileType: 'png',
          quality: 1, //圖片質(zhì)量
          success(res) {
            // console.log(res.tempFilePath, 'canvas生成圖片地址');
            //上傳
            uni.uploadFile({
              url: 'https://example.weixin.qq.com/upload', // 僅為示例荤牍，非真實(shí)的接口地址
              filePath: res.tempFilePath,
              name: 'file_signature',
              formData: {
                user: 'test'
              },
              success(res) {
                const data = res.data
                // do something
              }
            })
          }
        })
      },

      //設(shè)置canvas背景色  不設(shè)置  導(dǎo)出的canvas的背景為透明
      //@params：字符串  color
      setCanvasBg(color) {
        /* 將canvas背景設(shè)置為 白底案腺，不設(shè)置  導(dǎo)出的canvas的背景為透明 */
        //rect() 參數(shù)說明  矩形路徑左上角的橫坐標(biāo)，左上角的縱坐標(biāo), 矩形路徑的寬度, 矩形路徑的高度
        //這里是 canvasHeight - 4 是因?yàn)橄逻吷w住邊框了康吵，所以手動(dòng)減了寫
        this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
        // ctx.setFillStyle('red')
        this.ctx.setFillStyle(color)
        this.ctx.fill() //設(shè)置填充
        this.ctx.draw() //開畫
      }
    }

獲取到base64圖片地址以后根據(jù)項(xiàng)目需求與后端交互保存信息即可

css部分

 .wrapper {
    font-size: 28rpx;
    padding: 0 30rpx;
  }

  .pageTitle {
    font-size: 30rpx;
    text-align: center;
    border-bottom: 1px solid #7f7f7f;
    padding: 60rpx 0;
    margin-bottom: 50rpx;
    color: #000;
    font-family: syNORMAL;
    font-weight: bold;
  }

  .userInfo {
    display: flex;
    justify-content: space-between;
    margin-bottom: 65rpx;
  }

  .userInfo .item {
    color: #000;
  }

  .userInfo .input {
    background-color: #f0f0f0;
    height: 60rpx;
    line-height: 60rpx;
    padding-left: 10rpx;
    margin-top: 10rpx;
  }

  .textBox {
    display: block;
    color: #777;
    margin-bottom: 65rpx;
  }

  .checkBox {
    margin-bottom: 75rpx;
    color: #777;
    padding-left: 74rpx;
    text-align: justify;
    position: relative;
    line-height: 46rpx;
  }

  .checkBox .check_1 {
    position: absolute;
    left: 0;
    top: 6rpx;
    /* width: 28rpx;height:29rpx;border: 1px solid #000; */
    padding: 1rpx;
    font-size: 24rpx;
    line-height: 24rpx;
  }

  .checkBox .mf-check {
    background-color: #000;
    color: #fff;
  }

  .checkBox .link {
    display: inline-block;
    border-bottom: 1px solid #777;
    padding: 0 4rpx;
  }

  .black-select,
  .red-select {
    display: none;
  }

  .autograph {
    margin: 240rpx 0 100rpx;
  }

  .autograph .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
  }

  .autograph .title label {
    color: #000;
  }

  .autograph .title .link {
    border-bottom: 1px solid #777;
    padding: 0 4rpx;
    color: #777;
  }

  .handWriting {
    background: #fff;
    width: 100%;
    height: 200px;
  }

  .handRight {
    /* display: inline-flex;
    align-items: center; */
  }

  .handCenter {
    border: 1px solid #000;
    /* flex: 5; */
    overflow: hidden;
    box-sizing: border-box;
  }

  .handTitle {
    /* transform: rotate(90deg);
    flex: 1; */
    color: #666;
  }

  .handBtn button {
    font-size: 28rpx;
    border-radius: 0;
    margin: 30rpx 0 0 30rpx;
  }

  .handBtn button:after {
    border-radius: 0;
    border: none
  }

  .handBtn {
    /* height: 95vh;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;
    flex: 1;*/
    display: flex;
    justify-content: flex-end;
  }

  .delBtn {
    /* position: absolute;
    top: 250rpx;
    left: 0rpx;*/
    /* transform: rotate(90deg); */
    color: #000;
    background-color: #fff;
    border: 1px solid #000;
  }

  .delBtn image {
    /* position: absolute;
    top: 13rpx;
    left: 25rpx;*/
  }

  .subBtn {
    /* position: absolute;
    bottom: 52rpx;
    left: -3rpx;*/
    /* display: inline-flex; */
    /* transform: rotate(90deg); */
    background: #000;
    color: #fff;
    margin-bottom: 30rpx;
    /* text-align: center;
    justify-content: center; */
  }

  /*Peach - 新增 - 保存*/

  .saveBtn {
    /* position: absolute;
    top: 375rpx;
    left: 0rpx;
    transform: rotate(90deg); */
    color: #666;
  }


  .previewBtn {
    /* position: absolute; */
    /* top: 500rpx; */
    /* top: 375rpx;
    left: 0rpx; */
    /* transform: rotate(90deg); */
    color: #666;
    display: none;
  }

  .uploadBtn {
    /* position: absolute;
    top: 625rpx;
    left: 0rpx;*/
    /* transform: rotate(90deg); */
    color: #666;
  }


  /*Peach - 新增 - 保存*/





  .black-select {
    width: 60rpx;
    height: 60rpx;
    /* position: absolute;
    top: 30rpx;
    left: 25rpx;*/
  }

  .black-select.color_select {
    width: 90rpx;
    height: 90rpx;
    /* top: 30rpx;
    left: 10rpx; */
  }

  .red-select {
    width: 60rpx;
    height: 60rpx;
    /* position: absolute;
    top: 140rpx;
    left: 25rpx;*/
  }

  .red-select.color_select {
    width: 90rpx;
    height: 90rpx;
    /* top: 120rpx;
    left: 10rpx; */
  }

附帶第二版代碼

<!-- sign bate 2 -->
<!-- <template>
    <view class='contents'>
        <canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move' @touchstart='start($event)' @touchend='end'
         @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'>
        </canvas>
        <view class="caozuo">
            <view class="chongqian" @tap='clearClick'>
                重簽
            </view>
            <view class="over" @tap="overSign">
                完成簽名
            </view>
        </view>
    </view>
</template>

<script>
    var content = null;
    var touchs = [];
    var canvasw = 0;
    var canvash = 0;
    var _that;
    //獲取系統(tǒng)信息
    uni.getSystemInfo({
        success: function(res) {
            canvasw = res.windowWidth;
            canvash = res.windowHeight;
        },
    })
    export default {
        data() {
            return {
                signImage: '',
                isEnd: false // 是否簽名
            }
        },

        methods: {
            overSign: function() {
                if (this.isEnd) {
                    uni.canvasToTempFilePath({
                        canvasId: 'firstCanvas',

                        success: function(res) {
                            //打印圖片路徑
                            console.log(res.tempFilePath)
                            console.log('完成簽名')
                            //設(shè)置圖片
                            _that.signImage = res.tempFilePath
                        }
                    })
                } else {
                    uni.showToast({
                        title: '請先完成簽名',
                        icon: "none",
                        duration: 1500,
                        mask: true
                    })
                }

            },

            // 畫布的觸摸移動(dòng)開始手勢響應(yīng)
            start: function(event) {
                // console.log(event)
                console.log("觸摸開始" + event.changedTouches[0].x)
                console.log("觸摸開始" + event.changedTouches[0].y)
                //獲取觸摸開始的 x,y
                let point = {
                    x: event.changedTouches[0].x,
                    y: event.changedTouches[0].y
                }
                // console.log(point)
                touchs.push(point);

            },
            // 畫布的觸摸移動(dòng)手勢響應(yīng)
            move: function(e) {
                let point = {
                    x: e.touches[0].x,
                    y: e.touches[0].y
                }
                // console.log(point)
                touchs.push(point)
                if (touchs.length >= 2) {
                    this.draw(touchs)
                }
            },

            // 畫布的觸摸移動(dòng)結(jié)束手勢響應(yīng)
            end: function(e) {
                console.log("觸摸結(jié)束" + e)
                // 設(shè)置為已經(jīng)簽名
                this.isEnd = true
                // 清空軌跡數(shù)組
                for (let i = 0; i < touchs.length; i++) {
                    touchs.pop()
                }

            },

            // 畫布的觸摸取消響應(yīng)
            cancel: function(e) {
                console.log("觸摸取消" + e)
            },

            // 畫布的長按手勢響應(yīng)
            tap: function(e) {
                console.log("長按手勢" + e)
            },

            error: function(e) {
                console.log("畫布觸摸錯(cuò)誤" + e)
            },

            //繪制
            draw: function(touchs) {
                console.log(touchs[0],touchs[1])
                let point1 = touchs[0]
                let point2 = touchs[1]
                touchs.shift()
                content.moveTo(point1.x, point1.y)
                content.lineTo(point2.x, point2.y)
                content.stroke()
                content.draw(true)
            },
            //清除操作
            clearClick: function() {
                // 設(shè)置為未簽名
                this.isEnd = false
                //清除畫布
                content.clearRect(0, 0, canvasw, canvash)
                content.draw(true)
            },
        },
        /**
         * 生命周期函數(shù)--監(jiān)聽頁面加載
         */
        onLoad: function(options) {
            _that = this
            //獲得Canvas的上下文
            content = wx.createCanvasContext('firstCanvas')
            //設(shè)置線的顏色
            content.setStrokeStyle("#000")
            //設(shè)置線的寬度
            content.setLineWidth(5)
            //設(shè)置線兩端端點(diǎn)樣式更加圓潤
            content.setLineCap('round')
            //設(shè)置兩條線連接處更加圓潤
            content.setLineJoin('round')
        },



    }
</script>

<style>
    .ts {
        color: #FF485D;
        font-size: 30upx;
        height: 100upx;
        line-height: 100upx;
        padding-left: 20upx;
    }

    canvas {
        background-color: #DDDDDD;
        width: 700upx;
        margin: 0 25upx;
        height: calc(100vh - 140upx);
    }

    .contents {
        padding-top: 20upx;
        padding-bottom: 100upx;
        box-sizing: border-box;
    }

    #signatureImg {
        background-color: #EEEEEE;
    }

    .caozuo {
        display: flex;
        height: 100upx;
        width: 750upx;
        position: fixed;
        left: 0;
        bottom: 0;
    }

    .caozuo view {
        width: 375upx;
        text-align: center;
        height: 100upx;
        line-height: 100upx;
        color: #FFFFFF;
    }

    .caozuo view:active {
        background-color: #CCCCCC;
        color: #333333;
    }

    .chongqian {
        background-color: #FF8F58;
    }

    .over {
        background-color: #0599D7;
    }
</style>
 -->

時(shí)間稍微有點(diǎn)久了劈榨，找不到借鑒原素材的地址了！如有冒犯晦嵌，還望海涵同辣！有原文地址的童鞋可以留言一下 會(huì)添加超鏈