javascript - Canvas 鼠标事件位置不同于光标

Question

我开始尝试使用 Canvas ，这可能是一个基本问题，但在这里找不到问题。

我的鼠标光标比我用鼠标事件坐标在 Canvas 上绘制的线慢。我在这里缺少什么？

Fiddle

P.S.- 如果使用 jQuery 的鼠标事件也会出现同样的问题:http://jsfiddle.net/2q4Sd/2/

window.addEvent('mousemove', function (event) {
    draw(event.event.clientX);
});

function draw(mouseX) {
    ctx.beginPath();
    ctx.strokeStyle = "black";
    ctx.lineWidth = 1;
    ctx.moveTo(mouseX, 0);
    ctx.lineTo(mouseX, canvas.height);
    ctx.stroke();
    ctx.closePath();
}

Answer 1

你画的线是关闭的有两个原因。两者都与 event.clientX 等返回的坐标与 Canvas 使用的坐标之间的差异有关:

1. 每个 Canvas 都有自己的坐标系，默认从 Canvas 元素左上角的 (0,0) 开始。 event.clientX 然而，相对于“客户区”(基本上是视口(viewport)，或者在 iframe 的情况下，它是它在页面上占据的区域)进行测量。因此，当您将 event.clientX 传递给您的 draw() 函数，并使用它来绘制到 Canvas 时，您没有考虑这两者的区别坐标系。为此，您可以使用以下内容:.getBoundingClientRect() .
2. 您遇到的另一个问题是，在您的情况下，event.clientX 等返回的坐标比例与特定 Canvas 使用的坐标比例可能存在差异元素。我在这里谈到了这个:https://stackoverflow.com/a/19079320/1937302但基本上，除非你有充分的理由，否则我会确保 CSS 设置的 Canvas 尺寸等于使用 HTML 属性 width 和 height< 设置的尺寸。

解决这两个问题:

http://jsfiddle.net/2q4Sd/8/

相关 HTML:

<canvas style="width:400px;height:300px;" width="400" height="300"></canvas>

新的 draw() 函数:

function draw(mouseX) {

    // fixes offset caused by event.clientX and the canvas element
    // having different origins for their coordinate systems:
    var xCoord = mouseX - canvas.getBoundingClientRect().left;

    ctx.beginPath();
    ctx.strokeStyle = "black";
    ctx.lineWidth = 1;
    ctx.moveTo(xCoord, 0);
    ctx.lineTo(xCoord, canvas.height);
    ctx.stroke();
    ctx.closePath();
}