canvas实现图片标注，绘制区域

使用canvas绘制通过多边形标注区域

AI视频项目中需要分析图片，需要前台绘制区域，后端获取坐标然后识别图像，通过canvas

获取点然后连线绘图

 HEML代码段

   <div class="areaDrawing">
      <img src="@/assets/images/snapPhotos.png" />
      <canvas ref="canvas" style="position: absolute; top: 0; left: 0;" :width="canvasWidth"
        :height="canvasHeight">canvas>
    div>

 CSS代码段

.areaDrawing {
  position: relative;
  width: 400px; // 绘图区域宽度
  height: 300px; // 绘图区域高度
 
  img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
}

 script代码段