<div class="boardBox" ref="boardBox">
  <canvas ref="board"
      
  </canvas>
</div>

.boardBox{
  margin: 30px auto;
  width: 90vw;
  height: 25vh;
  background: #f9f9f9;
  canvas{
    border: 1px solid #b3b3b3;
  }
}

let board = this.$refs.board;  // 獲取DOM
board.width = this.$refs.boardBox.offsetWidth; // 設置畫布寬
board.height = this.$refs.boardBox.offsetHeight;  // 設置畫布高
this.ctx = board.getContext('2d');  // 二維繪圖
this.ctx.strokeStyle = '#000';  // 顏色
this.ctx.lineWidth = 3; // 線條寬度

<div class="boardBox" ref="boardBox">
  <canvas ref="board"
      @touchstart="mStart"
      @touchmove="mMove"
      @touchend="mEnd">
  </canvas>
</div>
data() {
  return {
    ctx: null,
    point: {
      x: 0,
      y: 0
    },
    moving: false  // 是否正在繪制中且移動
  };
},
mounted() {
  let board = this.$refs.board;  // 獲取DOM
  board.width = this.$refs.boardBox.offsetWidth; // 設置畫布寬
  board.height = this.$refs.boardBox.offsetHeight;  // 設置畫布高
  this.ctx = board.getContext('2d');  // 二維繪圖
  this.ctx.strokeStyle = '#000';  // 顏色
  this.ctx.lineWidth = 3; // 線條寬度
},
methods: {
  // 觸摸(開始)
  mStart (e) {
    console.log(e);
    let x = e.touches[0].clientX - e.target.offsetLeft,
      y = e.touches[0].clientY - e.target.offsetTop;  // 獲取觸摸點在畫板（canvas）的坐標
    this.point.x = x;
    this.point.y = y;
    this.ctx.beginPath();
    this.moving = true;
  },
  // 滑動中...
  mMove (e) {
    if(this.moving) {
      let x = e.touches[0].clientX - e.target.offsetLeft,
        y = e.touches[0].clientY - e.target.offsetTop;  // 獲取觸摸點在畫板（canvas）的坐標
      this.ctx.moveTo(this.point.x, this.point.y);  // 把路徑移動到畫布中的指定點，不創(chuàng)建線條(起始點)
      this.ctx.lineTo(x, y); // 添加一個新點，然后創(chuàng)建從該點到畫布中最后指定點的線條，不創(chuàng)建線條
      this.ctx.stroke(); // 繪制
      this.point.x = x, this.point.y = y;  // 重置點坐標為上一個坐標
    }
  },
  // 滑動結束
  mEnd () {
    if(this.moving) {
      this.ctx.closePath();  // 停止繪制
      this.moving = false;  // 關閉繪制開關
    }
  },
},