canvas 绘制多个方框【基于vue】

1.dom

 <canvas 
 	width="640" 
 	height="480" 
 	id="paint_canvas"
 	ref="paint_canvas"
 	@mousedown.left="leftMouseClick($event)"
 	@mousemove="mouseMovePaint($event)"
 	@mouseup="mouseUpPaint($event)"
 	></canvas>

2.methods

 /**
  * 监听鼠标按键 获取起始位置
  * @param e 元素
  */
  leftMouseClick(e) {
   this.beginPiant = true;
   if (e.offsetX || e.layerX) {
    let x = e.offsetX === undefined ? e.layerX : e.offsetX;
    let y = e.offsetY === undefined ? e.layerY : e.offsetY;
    this.startPaint = [x, y];
    }
  },
  /**
   * 监听鼠标移动 获取移动位置
   * @param e 元素
   */
  mouseMovePaint(e) {
      if (e.offsetX || e.layerX) {
          let x = e.offsetX === undefined ? e.layerX : e.offsetX;
          let y = e.offsetY === undefined ? e.layerY : e.offsetY;
          this.endPaint = [x, y];
      }
      if (this.beginPiant && this.paintReact) {
          this.paintCanvas(this.startPaint, this.endPaint);
      }
  },
 /**
   * 监听鼠标抬起 获取结束位置
   * @param e 元素
   */
  mouseUpPaint(e) {
      if (e.offsetX || e.layerX) {
          let x = e.offsetX === undefined ? e.layerX : e.offsetX;
          let y = e.offsetY === undefined ? e.layerY : e.offsetY;
          this.endPaint = [x, y];
      }

      this.paintArr.push({
          start_x: this.startPaint[0],
          start_y: this.startPaint[1],
          end_x: this.endPaint[0],
          end_y: this.endPaint[1],
      });
      this.beginPiant = false;
  },
   /**
   * 按下左键绘制矩形框
   */
  paintCanvas(startPoint, endpoint) {
      let cxt = this.$refs.paint_canvas;
      let c = cxt.getContext("2d");
      let w = endpoint[0] - startPoint[0];
      let h = endpoint[1] - startPoint[1];
      c.strokeStyle = "#9F0B18";
      c.lineWidth = 3;

      // 清除过程中上一阶段的矩形
      c.clearRect(0, 0, cxt.width, cxt.height);

      // 绘制已保存的矩形
      this.paintArr.forEach((val) => {
          c.strokeRect(val.start_x, val.start_y, val.end_x - val.start_x, val.end_y - val.start_y);
          c.beginPath();
          c.fillStyle="#9F0B18";
          c.arc(val.end_x, val.start_y, 12, 0, Math.PI * 2, false);//圆
          c.fill();
          c.stroke();
      });
      c.beginPath();
      c.strokeRect(startPoint[0], startPoint[1], w, h);
      c.arc(endpoint[0], startPoint[1], 12, 0, Math.PI * 2, false);//圆
      c.fillStyle="#9F0B18";
      c.fill();
      c.stroke();
      c.closePath();
  },

3.效果图（圆形是为了画按钮，还没画完）