画布中的鼠标位置错位，向下向右偏移

项目场景：

画布：画布中的鼠标位置错位，向下向右偏移

---

问题描述：

提示：没有计算偏移量，导致画出的线位置偏移。

原来的代码：

 measureMouseMove(){
      let x = this.mouseLocation.eventXm1; // 获取起始位置的x轴坐标
      let y = this.mouseLocation.eventYm1; // 获取起始位置的y轴坐标
      let stopX = event.x; // 获取结束位置的x轴坐标
      let stopY = event.y; // 获取结束位置的y轴坐标
      let canvas3 = this.canvas3;
      let ctx3 = canvas3.getContext("2d");
      ctx3.clearRect (0, 0, canvas3.width, canvas3.height);// 清空画布
      ctx3.beginPath(); // 起始一条路径，或重置当前路径
      ctx3.lineWidth="2"; // 设置或返回当前的线条宽度
      ctx3.strokeStyle = "red"; // 设置或返回用于笔触的颜色、渐变或模式
      ctx3.moveTo(x, y);// 把路径移动到画布中的指定点，不创建线条
      ctx3.lineTo(stopX, stopY); // 添加一个新点，然后在画布中创建从该点到最后指定点的线条
      ctx3.closePath(); // 创建从当前点回到起始点的路径
      ctx3.stroke();// 绘制一条路径
}

---

原因分析：

注意：特别要注意上面画布中图片的坐标原点a,以及整个页面中的原点b，这两个地方有所区分。由于原点a相对于原点b的X轴和Y轴的偏移量，在画布中画出的线是相对于原点b的线，所以会把偏移量一同带过去，会造成鼠标划出的线偏移。

---

解决方案：

提示：把原点a相对于原点b的偏移量计算出来，在鼠标的起始位置和结束位置中都减去这个偏移量就可以了。

let offsetLeft = canvas3.getBoundingClientRect().left;// 计算左边偏移量
let offsetTop = canvas3.getBoundingClientRect().top;// 计算顶部偏移量
ctx3.moveTo(x - offsetLeft, y - offsetTop);// 把路径移动到画布中的指定点，不创建线条
ctx3.lineTo(stopX - offsetLeft, stopY - offsetTop);// 添加一个新点，创建线条

效果：鼠标轨迹和画线一致！

具体代码如下：

 measureMouseMove(){
      let x = this.mouseLocation.eventXm1; // 获取起始位置的x轴坐标
      let y = this.mouseLocation.eventYm1; // 获取起始位置的y轴坐标
      let stopX = event.x; // 获取结束位置的x轴坐标
      let stopY = event.y; // 获取结束位置的y轴坐标
      let canvas3 = this.canvas3;
      let offsetLeft = canvas3.getBoundingClientRect().left;// 计算左边偏移量
      let offsetTop = canvas3.getBoundingClientRect().top;// 计算顶部偏移量
      let ctx3 = canvas3.getContext("2d");
      ctx3.clearRect (0, 0, canvas3.width, canvas3.height);// 清空画布
      ctx3.beginPath(); // 起始一条路径，或重置当前路径
      ctx3.lineWidth="2"; // 设置或返回当前的线条宽度
      ctx3.strokeStyle = "red"; // 设置或返回用于笔触的颜色、渐变或模式
	  ctx3.moveTo(x - offsetLeft, y - offsetTop);// 把路径移动到画布中的指定点，不创建线条
      ctx3.lineTo(stopX - offsetLeft, stopY - offsetTop); // 添加一个新点，然后在画布中创建从该点到最后指定点的线条
      ctx3.closePath(); // 创建从当前点回到起始点的路径
      ctx3.stroke();// 绘制一条路径
}