JavaScript画布和鼠标位置

我试图用JavaScript在HTML5中制作一个绘图板，但工具（如铅笔、画笔等）的位置与我想象的不同

我发现它是不同的，因为位图（？），所以我试图修复它从其他人已经问过的答案，但我失败了

如何找到鼠标的正确位置

这是我的HTML代码（我使用引导）

---

我找到了getMousePos函数，它看起来可以与您正在做的工作配合使用。但是，它接受一个参数

e

（一个事件），该参数不会在您使用它的地方定义。尝试将调用移动到定义事件的事件处理程序中的

getMousePos

此外，

isDrawing

未定义

var el=document.getElementById（'c'）；
var ctx=el.getContext（'2d'）//붓
ctx.strokeStyle=“#FF0000”；
功能铅笔（）{
var isDrawing=错误；
el.onmousedown=函数（e）{
var pos=getMousePos（el，e）；
isDrawing=true；
ctx.移动到（位置x、位置y）；
};
el.onmousemove=功能（e）{
var pos=getMousePos（el，e）；
if（isDrawing）{
ctx.lineTo（位置x、位置y）；
ctx.stroke（）；
}
};
el.onmouseup=函数（）{
isDrawing=false；
};
}
函数getMousePos（画布，evt）{
var rect=canvas.getBoundingClientRect（）；
返回{
x:evt.clientX-rect.left，
y:evt.clientY-rect.top
};
}
铅笔（）

哦，我之前没有看到您的图表，也没有发现您的代码有问题。你能详细说明一下为什么你得到了错误的位置吗？这和你正在使用的鼠标光标有关吗？谢谢！！它工作得很好！！！我只是想‘var pos=var pos=getMousePos（el，e）；’代码位于“el.onmousedown=function（e）”上的函数名下。。。你能解释一下为什么这个'var pos~~~'行应该在所有onmouse函数中..？@wendykr，因为你正在监听鼠标事件并从事件中获取位置，但是事件get已传递给处理程序，因此它不是在

onmouse*

之外定义的。事件处理程序会以事件作为参数自动调用（

e

，在我的代码中）。啊，我明白了。非常感谢你！！！！现在我可以修复其他绘图工具。再次感谢：）

<div class="col-sm-10">
    <canvas id="c" width="900" height="500"></canvas>
</div> 

var el = document.getElementById('c'); //캔버스
var ctx = el.getContext('2d');  //붓

function pencil () {
    var pos = getMousePos(el, e);

    el.onmousedown = function() {
      isDrawing = true;
      ctx.moveTo(pos.X, pos.Y);
    };

    el.onmousemove = function() {
      if (isDrawing) {
        ctx.lineTo(pos.X, pos.Y);
        ctx.stroke();
      }
    };

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