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

我总共有五个画布，其中一个是主画布，我正在尝试用鼠标事件绘制，并从其他四个画布拖动img，然后将其放在我现在无法调试的地方。当我移动鼠标进行绘制时，我会在错误的位置进行绘制。对不起，我的英语不好。

var el=document.getElementById（'myCanvas'）；
var ctx=el.getContext（'2d'）；
var提取；
el.onmousedown=函数（e）{
isDrawing=true；
ctx.moveTo（e.clientX，e.clientY）；
};
el.onmousemove=功能（e）{
if（isDrawing）{
ctx.lineTo（e.clientX，e.clientY）；
ctx.stroke（）；
}
};
el.onmouseup=函数（）{
isDrawing=false；
};
*{
保证金：0；
填充：0；
}
身体{
字体大小：120%；
背景：#F8F8FF；
}
形式，、内容{
宽度：30%；
保证金：0px自动；
填充：20px；
边框：1px实心#B0C4DE；
背景：白色；
边界半径：0px 0px 10px 10px；
}
帆布{
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
显示：块；
}
#我的画布1{
显示：块；
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
浮动：左；
}
#我的画布2{
显示：块；
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
浮动：对；
}
#我的画布3{
显示：块；
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
浮动：初始；
}
#我的画布4{
显示：块；
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
}
您需要相对于鼠标相对于要绘制的元素的偏移量绘制线段，在本例中，您的主要

这是获得偏移量的方式：

而不是：

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

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

使用：

而不是：

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

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

使用：

以下是完整的示例：


var el=document.getElementById（'myCanvas'）；
var ctx=el.getContext（'2d'）；
var提取；
el.onmousedown=函数（e）{
isDrawing=true；
ctx.moveTo（e.pageX-this.offsetLeft，e.pageY-this.offsetTop）；
};
el.onmousemove=功能（e）{
if（isDrawing）{
ctx.lineTo（e.pageX-this.offsetLeft，e.pageY-this.offsetTop）；
ctx.stroke（）；
}
};
el.onmouseup=函数（）{
isDrawing=false；
};
*{
保证金：0；
填充：0；
}
身体{
字体大小：120%；
背景：#F8F8FF；
}
形式，、内容{
宽度：30%；
保证金：0px自动；
填充：20px；
边框：1px实心#B0C4DE；
背景：白色；
边界半径：0px 0px 10px 10px；
}
帆布{
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
显示：块；
}
#我的画布1{
显示：块；
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
浮动：左；
}
#我的画布2{
显示：块；
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
浮动：对；
}
#我的画布3{
显示：块；
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
浮动：初始；
}
#我的画布4{
显示：块；
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
}

如果没有任何代码，也没有任何关于“错误方式”是什么的解释，我们怎么知道你做错了什么？我真的很抱歉没有上传代码，因为StackOverflow对我来说是新出现的，这是我的教授推荐的。没问题-你现在已经发布了，所以我将向上投票并撤回我的接近投票。D:D我做了。