我的鼠标指针在我的画布应用程序中不准确。（html）-FIXED

Question

在我的绘画应用程序中，我的鼠标指针不准确。它工作得很完美，但是当我开始绘制时，实际的颜色将是指针和右边的一点。看看你自己。

<a href="http://jsfiddle.net/daniel9000/egpr99k9/">DEMO</a>
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

我不会因某种原因插入网址，所以不得不这样说。只需复制url.sorry

忽略不起作用的颜色（这只是JSFiddle的一个小故障）

Answer 1

鼠标事件报告的位置是相对于整个窗口的，而不是放置canvas元素的位置。

我使用JQuery来获取canvas元素的位置并使用它来抵消鼠标位置。也许其他人可以使用纯粹的JavaScript解决方案。

把

var p = $("#canvas").position();

在你的putPoint函数之上。

然后，在你的putPoint函数里面做这个

var mouseX = e.clientX + p.left;
var mouseY = e.clientY - p.top;

好吧，弄明白我的愚蠢。您可以在putPoint函数中执行此操作，而不是JQuery。

var mouseX = e.clientX + canvas.offsetLeft;
var mouseY = e.clientY - canvas.offsetTop;