web canvas图片标点 得像素坐标数组

web前端 在图片上标点 获取坐标 Vue

最近在开发过程中有一个需求：
要在一个不规则的物体图片上画标点，获取所有坐标，然后计算出相对面积。

步骤思路：

1. 用canvas元素，进行导入图片
2. 获取鼠标坐标
3. canvas相对浏览器的距离
4. 取差获得canvas中的坐标值
5. 根据canvas的宽高比映射成为像素坐标

用到两个位置数据（官方文档）：MouseEvent.clientX，MouseEvent.clientY
他们的概念如下：红点是鼠标点击

用到的一个位置函数（官方文档）：getBoundingClientRect()
概念：

var bbox = _this.canvas.getBoundingClientRect();

由上可知：canvas中的实际坐标值为
x = event.clientX - bbox.left
y = event.clientX- bbox.top
之后我们要做的是，把canvas坐标映射成像素点坐标。

下面是代码流程：

1、html:建一个canvas，设置鼠标点击的响应函数 setPoint

<template>
  <div>
    <div style="float:left;width:90%">
      <canvas id="mycanvas" @mousedown="setPoint"></canvas>
    </div>
 </template>

2、js 一开始在canva上绘制图片

//  imageUrl为后台提供图片地址
   doDraw