//div

  <canvas id="theCanvas" width="800" height="400"></canvas>

//mounted

mounted(){

  cavs() {
      let theCanvas = document.querySelector("#theCanvas");

      if (!theCanvas || !theCanvas.getContext) {
        return false;
      } else {
        let context = theCanvas.getContext("2d"
 
);
        const windowToCanvas = (canvas, x, y) => {
          //獲取canvas元素距離視窗的一些屬性，MDN上有解釋
          let rect = canvas.getBoundingClientRect();

          //x和y引數分別傳入的是滑鼠距離視窗的座標，然後減去canvas距離視窗左邊和頂部的距離。

          return {
            x: x - rect.left * (canvas.width / rect.width),

            y: y 
 
- rect.top * (canvas.height / rect.height),
          };
        };
        theCanvas.onmousedown = function (e) {
          //獲得滑鼠按下的點相對canvas的座標。
          let ele = windowToCanvas(theCanvas, e.clientX, e.clientY);

          //es6的解構賦值
          let { x, y } = ele;

          //繪製起點。
          context.moveTo(x, y);
        };

        theCanvas.onmousedown 
 
= function (e) {
          //獲得滑鼠按下的點相對canvas的座標。
          let ele = windowToCanvas(theCanvas, e.clientX, e.clientY);

          //es6的解構賦值
          let { x, y } = ele;

          //繪製起點。
          context.moveTo(x, y);

          //滑鼠移動事件

          theCanvas.onmousemove = (e) => {
            //移動時獲取新的座標位置，用lineTo記錄當前的座標，然後stroke繪製上一個點到當前點的路徑

            let ele = windowToCanvas(theCanvas, e.clientX, e.clientY);
            let { x, y } = ele;
            context.lineTo(x, y);
            context.stroke();
          };
          
          //這種方法是直線
          // theCanvas.onmouseup = (e) => {//   let ele = windowToCanvas(theCanvas, e.clientX, e.clientY);
          //   let { x, y } = ele;
          //   context.lineTo(x, y);
          //   context.stroke();
          // };
        };
      }
    },
   }

效果：

參考事件：