画布鼠标事件位置与光标不同答案

【问题标题】：canvas mouse event position different than cursor画布鼠标事件位置与光标不同
【发布时间】：2013-12-31 12:44:24
【问题描述】：

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

我的鼠标光标比我在画布上用鼠标事件坐标绘制的线慢。我在这里错过了什么？

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();
}

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

您的画线不正确有两个原因。两者都与event.clientX等返回的坐标与画布使用的坐标之间的差异有关：

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

解决这两个问题：

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();
}

【讨论】：

有趣！欣赏解释。谢谢。

【解决方案2】：

这是因为首先在画布上没有正确设置大小，所以它通过 CSS 调整了后期渲染的大小，其次是因为您有默认填充。

如果将画布线更改为：

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

并重置填充/边距：

* {padding:0px;margin:0px;}

你应该很好，否则你将不得不通过使用 getBoundingClientRect() 之类的方法获取画布尺寸来处理偏移

我在下面更新了你的小提琴：

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

【讨论】：