canvas绘制签名

1. 先进行签名项配置

// 关于签名
    createCanvas() {
      // 获取canvas 实例
      var canvas = document.getElementById('mycanvas')
      // 设置宽高
      canvas.width = this.config.width
      canvas.height = this.config.height
      // 设置一个边框，方便咱们检查及运用
      canvas.style.border = '1px solid #ccc'
      // 创立上下文
      this.ctx = canvas.getContext('2d')
      // 设置填充背景色
      this.ctx.fillStyle = '#fff'
      // 制作填充矩形
      this.ctx.fillRect(
        0, // x 轴开端制作方位
        0, // y 轴开端制作方位
        this.config.width, // 宽度
        this.config.height // 高度
      );

    },

2. 默认设置

 ctx: undefined,
      config: {
        width: 300, // 宽度
        height: 200, // 高度
        lineWidth: 5, // 线宽
        strokeStyle: '#000', // 线条色彩
        lineCap: 'round', // 设置线条两头圆角
        lineJoin: 'round' // 线条交汇处圆角
      },
      client: {
        offsetX: 0, // 偏移量
        offsetY: 0,
        endX: 0, // 坐标
        endY: 0
      },

3. 页面dom

 <canvas id="mycanvas" @mousedown="mousedown"></canvas>

4. 执行画图

mousedown(e) {
      // 初始化
      // 获取偏移量及坐标
      const { offsetX, offsetY, pageX, pageY } = e
      // 修正前次的偏移量及坐标
      this.client.offsetX = offsetX
      this.client.offsetY = offsetY
      this.client.endX = pageX
      this.client.endY = pageY
      // 铲除以上一次 beginPath 之后的一切途径，进行制作
      this.ctx.beginPath()
      // 依据装备文件设置进行相应装备
      this.ctx.lineWidth = this.config.lineWidth
      this.ctx.strokeStyle = this.config.strokeStyle
      this.ctx.lineCap = this.config.lineCap
      this.ctx.lineJoin = this.config.lineJoin
      // 设置画线开端点位
      this.ctx.moveTo(this.client.offsetX, this.client.offsetY)
      this.ctx.stroke()
      window.addEventListener("mousemove", this.mousemove)
    },
    mousemove(e) {
      // 获取当时坐标点位
      const { offsetX, offsetY } = e
      // 修正最终一次制作的坐标点
      // this.client.endX = offsetX
      // this.client.endY = offsetY
      // 依据坐标点位移动增加线条
      let h = document.getElementById('mycanvas').getBoundingClientRect().top
      let w = document.getElementById('mycanvas').getBoundingClientRect().left
      this.ctx.lineTo(e.clientX - w, e.clientY - h)
      console.log(offsetX, offsetY);
      // 制作
      this.ctx.stroke()
      window.addEventListener("mouseup", this.mouseup)
    },
    mouseup() {
      this.ctx.closePath()
      // 移除鼠标移动或手势移动监听器
      window.removeEventListener("mousemove", this.mousemove)
    },
    clearcanvas() {
      // 清空画布
      this.ctx.clearRect(0, 0, this.config.width, this.config.height)
      // 清空签名url
      this.sendbackForm.signUrl = undefined
    },

5. 补充说明

如果是手机签名
          <canvas
            class="mycanvas"
            canvas-id="mycanvas"
            @touchstart="touchstart"
            @touchmove="touchmove"
            @touchend="touchend"
          ></canvas>

  // 关于签名
    createCanvas() {
      this.ctx = uni.createCanvasContext("mycanvas", this); //创建绘图对象
      //设置画笔样式
      this.ctx.lineWidth = 4;
      this.ctx.strokeStyle = "#3366FF";
      this.ctx.lineCap = "round";
      this.ctx.lineJoin = "round";
    },

    touchstart(e) {
      // 触摸开始，获取焦点
      let startX = e.changedTouches[0].x;
      let startY = e.changedTouches[0].y;
      let startPoint = {
        X: startX,
        Y: startY,
      };
      this.points.push(startPoint);
      //每次触摸开始，开启新的路径
      this.ctx.beginPath();
    },
    touchmove(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() {
      // 触摸结束，将未绘制的点清空防止对后续路径产生干扰
      this.points = [];
    },
    draw() {
      //绘制笔迹
      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);
      this.hasSign = true;
    },
    clear() {
      //清空画布
      this.hasSign = false;
      let _this = this;
      uni.getSystemInfo({
        success: function (res) {
          let canvasw = res.windowWidth;
          let canvash = res.windowHeight;
          _this.ctx.clearRect(0, 0, canvasw, canvash);
          _this.ctx.draw(true);
        },
      });
    },

    finish() {
      //完成绘画并保存到本地
      if (!this.hasSign) {
        uni.showToast({
          title: "签名为空不能保存",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      let _this = this;
      uni.canvasToTempFilePath({
        canvasId: "mycanvas",
        fileType: "png",
        success: function (res) {
          const header = uni.getStorageSync("token");
          let a = uni.uploadFile({
            url: baseCfg.baseURL + "/management/comm/file/upload", //上传图片接口
            filePath: res.tempFilePath,
            name: "attachments",
            header: {
              Authorization: `Bearer ${header}`,
            },
            success: (res) => {
              const json = JSON.parse(res.data);
              json.data.forEach((item) => {
                formValue.value.commonInfo.diagramAuthorSign = item.id;
              });
              _this.showSign = false;
            },
          });
        },     
      });
    },