使用鼠标在Canvas上绘制矩形

前言

最近接到一个项目，要求在图像上画框 圈监测范围，发现如下方案可快速实现，特此记录。

代码如下：

<template>
  <div>
    <canvas id="myCanvas" ref="myCanvas" :width="canvasWidth" :height="canvasHeight" class="canvas-box" @mousedown="mousedown" @mouseup="mouseup" @mousemove="mousemove"></canvas>
  </div>
</template>

<script>
  export default {
    name:"",
    data() {
      return {
        canvasFlag: false,
        canvasWidth: 491,
        canvasHeight: 276,
        startPos:[0,0],
        endPos:[0,0],
      };
    },
    methods: {
      mousedown(e){
        // console.log("鼠标落下");
        this.canvasFlag = true;
        this.startPos=[e.offsetX,e.offsetY] // 鼠标落下时的X,Y
      },
      mouseup(e){
        // console.log("鼠标抬起");
        this.canvasFlag = false;
      },
      mousemove(e){
        // console.log("鼠标移动");
        this.drawRect(e);
      },
      drawRect(e){
        if(this.canvasFlag){
          const canvas = this.$refs.myCanvas;
          var ctx = canvas.getContext("2d");
          let x = this.startPos[0];
          let y = this.startPos[1];
          this.endPos=[e.offsetX,e.offsetY]
          ctx.clearRect(0,0,canvas.width,canvas.height);
          ctx.beginPath();

          //设置线条颜色，必须放在绘制之前
          ctx.strokeStyle = '#ff0000';
          // 线宽设置，必须放在绘制之前
          ctx.lineWidth = 2;

          ctx.strokeRect(x,y,e.offsetX-x,e.offsetY-y);
          console.log("绘制图形",this.startPos,this.endPos);
        }
      }
    },

  };
</script>

效果图