在画布上拖动鼠标会在错误的坐标上绘制

Question

我总共有五个画布，其中一个是主画布，我试图用鼠标事件绘制并从其他四个画布拖动img并放在哪里，现在，我被调试了。当我移动鼠标绘制时，我绘制但是在单击鼠标的位置错误。对不起，我的英语不好。

var el = document.getElementById('myCanvas');
var ctx = el.getContext('2d');
var isDrawing;

el.onmousedown = function(e) {
  isDrawing = true;
  ctx.moveTo(e.clientX, e.clientY);
};
el.onmousemove = function(e) {
  if (isDrawing) {
    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();
  }
};
el.onmouseup = function() {
  isDrawing = false;
};

* {
	margin: 0;
	padding: 0;

}
body {
	font-size: 120%;
	background: #F8F8FF;
}

form, .content {
	width: 30%;
	margin: 0px auto;
	padding: 20px;
	border: 1px solid #B0C4DE;
	background: white;
	border-radius: 0px 0px 10px 10px;
}
canvas {
	
	padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#myCanvas1 {
	display: block;
	padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    float: left;
}

#myCanvas2 {
	display: block;
	padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    float: right;
}

#myCanvas3 {
	display: block;
	padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    float: initial;
}

#myCanvas4 {
	display: block;
	padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
 }

<canvas id="myCanvas" width="500" height="300" style="border:1px solid #ccc;">
</canvas>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #ccc;">
</canvas>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #ccc;">
</canvas>
<canvas id="myCanvas3" width="200" height="100" style="border:1px solid #ccc;">
</canvas>
<canvas id="myCanvas4" width="200" height="100" style="border:1px solid #ccc;">
</canvas>

Answer 1

您需要相对于要绘制的元素的鼠标偏移绘制细分，在这种情况下是您的主要<canvas>。

这是你获得抵消的方式：

而不是：

ctx.moveTo(e.clientX, e.clientY)

使用：

ctx.moveTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop)

而不是：

ctx.lineTo(e.clientX, e.clientY)

使用：

ctx.lineTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop)

以下是完整的示例：

var el = document.getElementById('myCanvas');
var ctx = el.getContext('2d');
var isDrawing;

el.onmousedown = function(e) {
  isDrawing = true;
  ctx.moveTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
};

el.onmousemove = function(e) {
  if (isDrawing) {
    ctx.lineTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
    ctx.stroke();
  }
};

el.onmouseup = function() {
  isDrawing = false;
};

* {
  margin: 0;
  padding: 0;
}

body {
  font-size: 120%;
  background: #F8F8FF;
}

form, .content {
  width: 30%;
  margin: 0px auto;
  padding: 20px;
  border: 1px solid #B0C4DE;
  background: white;
  border-radius: 0px 0px 10px 10px;
}

canvas {
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#myCanvas1 {
  display: block;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  float: left;
}

#myCanvas2 {
  display: block;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  float: right;
}

#myCanvas3 {
  display: block;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  float: initial;
}

#myCanvas4 {
  display: block;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}

<canvas id="myCanvas" width="500" height="300" style="border:1px solid #ccc;">
</canvas>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #ccc;">
</canvas>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #ccc;">
</canvas>
<canvas id="myCanvas3" width="200" height="100" style="border:1px solid #ccc;">
</canvas>
<canvas id="myCanvas4" width="200" height="100" style="border:1px solid #ccc;">
</canvas>