cavas鼠标签名的运用

+html

<div id="signaTure" class="signature">
            <canvas id="canvas" />
           也可以在canvas中定义宽高
           //    <canvas id="canvas" width="200px" height="220px" />
  </div>
  <el-button style="float:right; margin:0 30px 10px 0" @click="clear"> 清空签名 </el-button>

• data中

data（）{
	return {
	    canvas: {},
	}
}

• 方法

// 画布 画笔
    do() {
      var x, y
      this.canvas = document.querySelector('#canvas')
      var ctx = this.canvas.getContext('2d')
      ctx.fillStyle = '#fff'
      var signaTure = document.getElementById('signaTure') 
      this.canvas.width = signaTure.clientWidth // 设置myCanvas宽度 
      this.canvas.height = signaTure.clientHeight // 设置myCanvas高度
      this.canvas.onmousedown = function(event) {
        x = event.offsetX
        y = event.offsetY
        document.onmousemove = function(event) {
          var x1 = event.offsetX
          var y1 = event.offsetY
          ctx.beginPath() // 开始绘制一个新的路径
          ctx.globalAlpha = 1 // 透明值
          ctx.lineWidth = 2 // 线条宽度
          ctx.strokeStyle = '#000' // 笔触的颜色
          ctx.moveTo(x, y) // 将当前点移动到点(x,y)
          ctx.lineTo(x1, y1) // 从当前点绘制一条直线到点(x1,y1)
          ctx.closePath() // 通过绘制一条当前点到路径起点的线段来闭合形状
          ctx.stroke() // 绘制空心形状
          x = x1
          y = y1
        }
      }
      document.onmouseout = function(event) {
        this.onmousemove = null
      }
      document.onmouseup = function() {
        this.onmousemove = null
      }
    },
    // 清空
    clear() {
      document.querySelector('#canvas').getContext('2d').clearRect(0, 0, this.canvas.width, this.canvas.height)
    },
    // 保存图片
    async toImg() {
      var image = new Image()
      image.src = this.canvas.toDataURL('image/png')
      // 此时可以自行将文件上传至服务器
      const imgSrc = image.src.replace(/^data:image\/\w+;base64,/, '') // replace消除前缀，获取完整的base64码
      axios.post('http://192.168.40.55:8181/api/upload', {
        dirName: 'public/personnel/pc',
        suffix: '.png',
        data: imgSrc
      }).then(res => {
        const ress = addemployeeSignature({ employeeId: this.employeeId, autographUrl: res.data.data })
        ress.code === 200 && this.$message.success(ress.message)
        this.buttoninfo = true
      })
    },

• 判断画布是否为空

// 验证canvas画布是否为空函数
    isCanvasBlank(canvas) {
      var blank = document.createElement('canvas') // 系统获取一个空canvas对象
      blank.width = canvas.width
      blank.height = canvas.height
      return canvas.toDataURL() === blank.toDataURL() // 比较值相等则为空
    }

手机端

• html

<div class="sign-wrap" id="signWrap">
          <canvas id="myCanvas"></canvas>
  </div>

• data

data() {
    return {
      image: "",
      mousePressed: false,
      c: "",
      ctx: "",
      lastX: 0,
      lastY: 0,
    };
  },

• 初始化

// 触摸屏
      do() {
	      this.image = "";
	      this.mousePressed = false;
	      var lastX, lastY;
	      this.ctx = document.getElementById("myCanvas").getContext("2d");
	      this.c = document.getElementById("myCanvas");
	      var signWrap = document.getElementById("signWrap");
	      this.c.width = signWrap.clientWidth; //设置myCanvas宽度
	      this.c.height = signWrap.clientHeight; //设置myCanvas高度
	
	      //监听touchstart事件，touchmove事件，touchend事件等事件
	      this.InitThis();
    },

• 调用

InitThis() {
      // 触摸屏
      var that = this;
      this.c.addEventListener(
        "touchstart",
        function (event) {
          if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，重要
            var touch = event.targetTouches[0];
            this.mousePressed = true;
            that.Draw(
              touch.pageX - this.offsetLeft,
              touch.pageY - this.offsetTop,
              false
            );
          }
        },
        false
      );

      this.c.addEventListener(
        "touchmove",
        function (event) {
          if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，重要
            var touch = event.targetTouches[0];
            if (this.mousePressed) {
              that.Draw(
                touch.pageX - this.offsetLeft,
                touch.pageY - this.offsetTop,
                true
              );
            }
          }
        },
        false
      );

      this.c.addEventListener(
        "touchend",
        function (event) {
          if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
            // var touch = event.targetTouches[0];
            this.mousePressed = false;
          }
        },
        false
      );
      // 鼠标
      this.c.onmousedown = function (event) {
        this.mousePressed = true;
        that.Draw(
          event.pageX - this.offsetLeft,
          event.pageY - this.offsetTop,
          false
        );
      };

      this.c.onmousemove = function (event) {
        if (this.mousePressed) {
          that.Draw(
            event.pageX - this.offsetLeft,
            event.pageY - this.offsetTop,
            true
          );
        }
      };

      this.c.onmouseup = function (event) {
        this.mousePressed = false;
      };
    },

• 调用

Draw(x, y, isDown) {
      if (isDown) {
        this.ctx.beginPath();
        this.ctx.strokeStyle = "#000"; //颜色
        this.ctx.lineWidth = 3; //线宽
        this.ctx.lineJoin = "round";
        this.ctx.lineMax = 10; //设置画笔最大线宽
        this.ctx.lineMin = 3; //设置画笔最小线宽
        this.ctx.linePressure = 1.2; //设置画笔笔触压力
        this.ctx.smoothness = 30; //设置画笔笔触大小变化的平滑度。
        this.ctx.moveTo(this.lastX, this.lastY);
        this.ctx.lineTo(x, y);
        this.ctx.closePath();
        this.ctx.stroke();
      }
      this.lastX = x;
      this.lastY = y;
    },
    clearArea() { //清空画板
      this.ctx.setTransform(1, 0, 0, 1, 0, 0);
      this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
    },