油漆画布无法正常工作

Question

http://www.asifslab.com/reveal.js-master/为什么％20does％20wind％20feel％20cold.html＃ / 4为什么绘图画布无法正常工作？ 绘制的线远离单击的点。 但是，如果我在Reveal.js中使用画布，则它可以完美工作。 http://codepen.io/anon/pen/eEaKh此外，运行擦除功能时，它还会在外面留下白色边框。 我该如何解决这些问题？

Answer 1

只是改变e.pageX到e.clientX和e.pageY到e.clientY因为在你codepen帐户
画布原点和页面原点几乎位于同一位置，但在其他地方则不同。

Answer 2

要计算鼠标位置，您需要减去画布的位置：

这是一种方法（在事件处理程序内部）：

var rect = canvas.getBoundingClientRect(),
    x = e.clientX - rect.left,
    y = e.clientY - rect.top;

现在，您的x和y将相对于画布。

Answer 3

这是我的绘画应用程序一小部分的副本/部分。 注意，我在计算中使用的是画布的偏移量。 我还具有缩放画布的缩放功能，因此考虑到将其添加到鼠标光标的计算中。

$('canvas').mousemove(function(e) {
    // x and y are globals, x inits to null, mousedown sets x, mouseup returns x to null
    if (x==null) return;
    x = (100/$('#zoom').val())*(e.pageX - $(this).offset().left);
    y = (100/$('#zoom').val())*(e.pageY - $(this).offset().top);

    $('#debug').html(x+', '+y); // constantly update (x,y) position in a fixed div during debugging
});