renli-pc/src/pages/test.vue

<template>
  <div>
    <canvas id="myCanvas"></canvas>
    <div class="footers">
      <el-button type="primary" plain size="mini" @click="clearArea()">清除</el-button>
      <el-button type="primary" size="mini" @click="saveImageInfo()">保存</el-button>
      <div>
        <input v-model="strokeStyle" type="color">
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      touchPressed: false,
      ctx: null,
      strokeStyle: "#EE2F2F",
      lineWidth: 2,
      lastX: null,
      lastY: null,
      canvas: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      let canvas = document.getElementById("myCanvas");
      this.canvas = canvas;
      this.ctx = canvas.getContext("2d");
      let winW = window.innerWidth;
      let winH = window.innerHeight;
      canvas.width = winW;
      canvas.height = winH;
      this.Init();
    });
  },
  methods: {
    Init() {
      this.canvas.addEventListener(
        "touchstart",
        (event) => {
          if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，重要
            var touch = event.targetTouches[0];
            this.touchPressed = true;
            this.draw(
              touch.pageX - this.canvas.offsetLeft,
              touch.pageY - this.canvas.offsetTop,
              false
            );
          }
        },
        false
      );
      this.canvas.addEventListener(
        "touchmove",
        (event) => {
          if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，重要
            var touch = event.targetTouches[0];
            if (this.touchPressed) {
              this.draw(
                touch.pageX - this.canvas.offsetLeft,
                touch.pageY - this.canvas.offsetTop,
                true
              );
            }
          }
        },
        false
      );
      this.canvas.addEventListener(
        "touchend",
        (event) => {
          if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
            this.touchPressed = false;
          }
        },
        false
      );
    },
    draw(x, y, isDown) {
      let ctx = this.ctx;
      if (isDown) {
        ctx.beginPath();
        ctx.strokeStyle = this.strokeStyle;
        ctx.lineWidth = this.lineWidth;
        ctx.lineJoin = "round";
        ctx.moveTo(this.lastX, this.lastY);
        ctx.lineTo(x, y);
        ctx.closePath();
        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);
    },
    saveImageInfo() {
      let a = document.createElement("a");
      a.href = this.canvas.toDataURL();
      a.download = "sign";
      a.click();
    },
  },
};
</script>

<style scoped>
.footers {
  position: fixed;
  z-index: 10;
  display: flex;
  border-top: 1px solid #ccc;
  margin: 0 150px;
}
.footers div {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#myCanvas {
  width: 50%;
  height: 50vh;
  border: #ccc 1px solid;
}
</style>